返回顶部按钮的两种设置方法

2013-6-8 Linyuting.cn 程序设计

    细心的朋友可能会发现我最近加上了个“返回顶部”的按钮,自我感觉方便了许多,页面拉到最下端时可以一键返回。虽然对懂得人来说有些简单,但对我这种一窍不通的还是值得记录。下面分享一下两个简单的返回顶部按钮设置方法:

 

    1.滚动式返回顶部,用jQuery设置的滚动式返回顶部按钮代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script>

(function() {

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

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

            $("html, body").animate({ scrollTop: 0 }, 50);//这里的50是滚动条向上的速度

    }), $backToTopFun = function() {

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

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

    };

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

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

})();

</script>

<style>

#gotop {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: .8; filter: Alpha(opacity=60);}

</style>

 

    2.一键返回顶部

<a href="#这里顶部某框架ID">点击这里返回顶部</a>

发表评论:

本站由emlog驱动 粤ICP备15042739号