使用Javascript实现返回顶部功能。

为了提高网站的浏览体验及友好度，相信大部分网站需要一个返回顶部的按钮，如果使用传统的a标记，再做一个div加上链接的话，非常麻烦，不仅每个页面都需要添加，而且不能实现非常智能的效果及简化维护时间。

下面，我分享一下我自己经常使用的一个返回按钮，当然，你也可以在这个基础上修改或者自己做一个。

示例：http://www.feikk.com/demo/go_top.html

建议将以下代码放在包函文件中，这样不必每个页面都添加，日后也好维护。

正文如下：

一、先调用jquery。

<script src="js/jquery.min.js" type="text/javascript"></script>

二、在页面任意位置添加如下代码。

（这里有一个样式表，和一个返回按钮所用的代码，你可以将样式表整合一下。）

<!--这里是返回顶部所需要的代码-->

<!--样式表-->

<style type="text/css">

.backToTop {

    display: none;

    width: 18px;

    line-height: 1.2;

    padding: 5px 0;

    background-color: #000;

    color: #fff;

    font-size: 12px;

    text-align: center;

    position: fixed;

    _position: absolute;

    right: 10px;

    bottom: 100px;

    _bottom: "auto";

    cursor: pointer;

    opacity: .6;

    filter: Alpha(opacity=60);

}

</style>

<!--返回顶部按钮的代码，里面有值，可以自己修改，当页面高度大于多少时显示返回top按钮。-->

<script language="javascript">;

(function() {

    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))

        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {

            $("html, body").animate({ scrollTop: 0 }, 120);

    }), $backToTopFun = function() {

        var st = $(document).scrollTop(), winh = $(window).height();

        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();

        //IE6下的定位

        if (!window.XMLHttpRequest) {

            $backToTopEle.css("top", st + winh - 166);

        }

    };

    $(window).bind("scroll", $backToTopFun);

    $(function() { $backToTopFun(); });

})();

</script>

-全文完-

By:Colin

转载请注明原文地址及作者，谢谢合作。

秒客网

使用Javascript实现返回顶部功能。

相关文章