超简单2步实现“回到顶部”功能

来源:网络来稿　热量:正在测温 ℃ 　生产日期：2011-01-02 23:22 转播到微博

超简单2步实现“回到顶部”功能

如果你仔细观察本站会发现在网站版权上面有一个TOP按钮，点击后会平滑自动滚动到网站顶部，这样的功能方便访客快速返回网页顶端，不用拖动右侧的滚动条了，呵呵，下面站长之家的stone来给大家讲下如何添加！

1.在网站的HEAD中加入以下代码：

<SCRIPT language=javascript>
// Smooth Scroll Back to Top
var scrollToTop = function(){ $('a[@href=#top]').click(function(){ backToTop(); return false;} ) };
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;

    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }

    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }

x3 = window.scrollX || 0;
y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));

window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));

    if (x > 0 || y > 0) {
        window.setTimeout("backToTop()", 30);
    }
}
</SCRIPT>

当然，上面的JS代码可以保存成.JS调用。
2.在网站版权上面添加以下代码：

当然，这里的回到顶部文字可以替换成漂亮的闪动GIF小图标。

只需要2步即可实现，是不是很简单呢？