一个简单的返回顶部效果

经常会在网页中看到返回顶部的功能，但是大多数都是采用简单的锚点直接定位到顶部，对用户来说显得太突兀，平缓过渡应该是一种比较好的用户体验。

但是从性能上来讲，直接定位到顶部毋须使用脚本，性能更高。

这个简单的测试例子效果如下：

定位到锚点

 

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

测试文本

返回顶部

实现脚本如下：

function rt() {
    var d = document,
    dd = document.documentElement,
    db = document.body,
    top = dd.scrollTop || db.scrollTop,
    step = Math.floor(top / 20);
    (function() {
        top -= step;
        if (top > -step) {
            dd.scrollTop == 0 ? db.scrollTop = top: dd.scrollTop = top;
            setTimeout(arguments.callee, 20);
        }
    })();
}

关于document.documentElement和document.body，在很多相关书籍中都采用下面这种办法：

var mode = document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body';

通过判断compatMode来确定浏览器是处于标准模式还是怪异模式(IE)，但是Chrome浏览器在处理时稍有不同。

Chrome浏览器下，document.documentElement.scrollTop 和 document.documentElement.scrollLeft 都为0，取不到正确的数据，而用document.body.scrollTop

和dcoument.body.scrollLeft则返回正确的数据。不知道在这一点上Chrome为什么脱离了标准。因此在上面代码的第5行使用

top = dd.scrollTop || db.scrollTop

来取得相应的scrollTop值，对于Chrome浏览器，取到的是db.scrollTop的值，这样就保证了该功能在几个主浏览器上可以正确运行。代码的后半部分通过间歇调用不断减少

scrollTop的值直到浏览器顶部。测试的时候没有测Safari，因为最近苹果停止了Safari对PC平台的支持，官网已经不提供Safari下载了。

这个例子到此还没有结束，可以扩展一下。对于返回顶部的功能，可能会很自然地联想到锚点的功能，在传统的锚点实现上，用户体验也是不太好的，如果定位到一堆

比较密集的文字中，住住比较耗费眼力。CSS3考虑到了这一点，给元素加入了一个:target伪类，比如点击上面例子中的“定位到锚点”，匹配的地方会以绿色的背景标识，

看起来醒目。样式代码如下：

p:target{background-color:#9acd32}

老式浏览器是不支持这个伪类的，不能用这种效果。

最后总结一下，通过这个例子学习了以下知识点：

1.Chrome浏览器中scrollTop的特殊性；

2.CSS3中:target伪类的使用；

3.只要声明了<!DOCTYPE>，浏览器不会进入怪异模式，包括IE6，以前一直以为需要声明xhtml1.0才行，可以通过浏览器返回documentElement或body来确认。

以上是个人的一些心得，希望园友们提出宝贵意见，多多指正。

转载请注明出处。