前端基本功：JS(九):scroll家族

scroll家族

Offset 自己的偏移
scroll 滚动的

1/ scrollTop 和 scrollLeft

scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

2/怎么得到scrollTop

我们学习一个事件：页面滚动效果

window.onscroll = function() { 页面滚动语句 }

谷歌浏览器和没有声明 DTD <DOCTYPE > ：
document.body.scrollTop;
火狐和其他浏览器
document.documentElement.scrollTop;
ie9+ 和最新浏览器都认识
window.pageXOffset; pageYOffset （scrollTop）

兼容性写法：

1   var scrollTop = window.pageYOffset || document.documentElement.scrollTop
2          || document.body.scrollTop || 0;

3/ JSON

**JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScript **
Json很像我们学过的样式条；

var myjson={k:v,k:v,k:v...} 键值对 key: value color: red;

Json一般就是被当做一个配置单用；
我们的网站，可以注册会员：
姓名：李白
年龄: 500
职业： it
xml

json 对象结构书写：

var json = { key: value， key1:value }
var json = {name: “李白”,age: 15}
使用：
json名.属性 json.name 李白

var json1 = {name :"刘德华",age: 55};
console.log(json1.name);  // 输出名字  刘德华
console.log(json1.age);  // 输出年龄  55

4/判断是不是怪异模式的浏览器

document.compatMode == "CSS1Compat"// 这里是声明了DTD的
//检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>

document.compatMode === "BackCompat"

BackCompat 未声明
CSS1Compat 已经声明

注意大小写

封装自己的scrollTop left

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>

</body>
</html>
<script>
    //   var json = {left: 10, right: 10}  变异
    //json.left   json.top
    function scroll() {
        if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
        {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
          // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { //  剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
    window.onscroll = function() {
        console.log(scroll().top);
    }
</script>

案例：跟随的广告

跟随的广告.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            position: absolute;
            left:0;
            top:50px;
        }
        #demo{
            width:1000px;
            margin:0 auto;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function() {
            var pic = $("pic");
            var leader = 0;
            var target = 0;
            var timer = null;  // 定时器
            var top = pic.offsetTop;  // 50
            window.onscroll = function() {
                clearInterval(timer);
                target = scroll().top + top;  // 把最新的 scrolltop 给  target
                timer = setInterval(function() {
                    leader = leader + (target - leader ) / 10;
                    pic.style.top = leader + 'px';
                },30)
            }
        }
    </script>
</head>
<body>
<img src="images/aside.jpg" alt="" id="pic"/>
<div id="demo">
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
</div>
</body>
</html>

其中my.js:

function $(id) {return document.getElementById(id);}
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪异模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

scrollTo(x,y)

window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

案例：火箭返回顶部

小火箭返回顶部.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            width: 2000px;
        }
       .top{
           position: fixed;
           right:50px;
           bottom:100px;
           display: none;
       }

    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function() {
            var goTop = $("gotop");
            window.onscroll = function() {
                scroll().top > 0 ? show(goTop) : hide(goTop);  // 如果大于0 就显示 否则隐藏
                leader = scroll().top;  // 把 卷去的头部 给  起始位置
                console.log(scroll().top);
            }
            var leader = 0,target = 0,timer = null;
            // leader 起始位置  target  目标位置
            goTop.onclick = function() {
                target = 0;  //  点击完毕之后 奔向0 去的  不写也可以
                timer = setInterval(function() {
                    leader = leader + (target - leader ) / 10;
                    window.scrollTo(0,leader);  // 去往页面中的某个位置
                    if(leader == target)
                    {
                        clearInterval(timer);
                    }
                },20);

            }

        }
    </script>
</head>
<body>
<div id="gotop" class="top">
    <img src="images/Top.jpg" alt=""/>
</div>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
</body>
</html>

my.js 部分


function $(id) {return document.getElementById(id);}
function show(obj) { obj.style.display = "block";}
function hide(obj) { obj.style.display = "none";}
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪异模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

今日案例跟随广告和火箭头回顶部的图片素材获取：

链接：http://pan.baidu.com/s/1jIdQVlG 密码：rlap

最后编辑于：2017.12.04 11:36:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,794评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,050评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,587评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,861评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,901评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,898评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,832评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,617评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,077评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,349评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,483评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,199评论 5赞 341
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,824评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,442评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,632评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,474评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,393评论 2赞 352