老师好同学们好

//页面加载完毕后触发
window.onload = function () {
    var obtn = document.getElementById("btn");
    obtn.onclick = function () {
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;//测量滚动条距上部高度
        document.documentElement.scrollTop = document.body.scrollTop = 200;
    }
}

请问一下，为什么我按照视频中的代码打，然后拿这一段代码进行测试。发现无论是火狐，360，IE它按一下就直接回到顶部，而不是距顶部200。这是为什么恩？谢谢！

Devisn

2015-04-08

源自：回到顶部效果 4-1

关注问题我要回答

1061

操作

收起

1 回答

QLwang_web
2016-01-06

var osTop = document.documentElement.scrollTop || document.body.scrollTop;//测量滚动条距上部高度

改成以下：

var de = document.documentElement;

var db = document.body;

var cm = (document.compatMode === "CSS1Compat");

var osTop = cm ? de.clientHeight : db.clientHeight;

解释：

一种办法就是判断当前页面是否开启了兼容模式来作相应的处理，即通过document.compatMode属性来判断。在有<!doctype>头情况下document.compatMode的值为CSS1Compat，称为标准兼容模式开启，没有文档头声明情况下的值为BackCompat，称为标准模式关闭，可以通过这个属性来正确取舍。

详细内容引见http://www.tangbc.com/blog/#frontends/254