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

scroll家族

Offset 自己的偏移
scroll 滚动的

1/ scrollTop 和 scrollLeft

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

2/怎么得到scrollTop

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

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

谷歌浏览器和没有声明 DTD ：
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的
//检测是不是怪异模式的浏览器 -- 就是没有 声明

document.compatMode === "BackCompat"

BackCompat 未声明
CSS1Compat 已经声明

注意大小写

封装自己的scrollTop left

案例：跟随的广告

跟随的广告.gif




    
    
    
    
    




   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇
   天王盖地虎，小鸡炖蘑菇

其中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
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明
    {
        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




    
    
    
    
    



    

我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多
我是内容部分，有很多恩多很多

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
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明
    {
        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