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

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

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

示例:http://www.uuan.cn/demo/go_top.html

 

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

正文如下:

一、先调用jquery。

<!-- 这里是用来调用jquery的 -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- 这里是用来调用jquery的 -->


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

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

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

<!--样式表-->
<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>
posted @ 2013-07-13 15:12  Colin.liu  阅读(405)  评论(0编辑  收藏  举报