欢迎登录

js实现回到顶部和回到底部

:2018-10-25    :493 次   :2525 字   

介绍:

为了解决pc端的长篇博文方便操作,在小神器增加回到顶部和回到底部的按钮。

代码:

回到顶部

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    </script>
</body>

回到底部

<script type="text/javascript">// <![CDATA[
        $( function () {
            var speed = 1000;//自定义滚动速度
            //回到顶部
            $( "#toTop").click( function () {
                $( "html,body").animate({ "scrollTop" : 0 }, speed);
                });
            //回到底部
            var windowHeight = parseInt($("body").css("height" ));//整个页面的高度
            $( "#toBottom").click(function () {
                $( "html,body").animate({ "scrollTop" : windowHeight }, speed);
            });
        });
  
// ]]></script>

回到某一个位置

 var $objTr = $("#comments h2");//目标
 var objTr = $objTr[0]; //转化为dom对象 
  $( "#comt").click( function () {
$("html,body").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr 
 });
    暂无评论,快来抢沙发吧!
×