收藏一份簡單好用的返回頂部和去底部代碼，喜歡就拿走吧！

首先貼出CSS部分：

 <style type="text/css">
   .fix_bar{
       position: fixed;
       right: 15px;
       bottom: 15px;
       z-index: 9999;
       cursor: pointer;
   }
     .layui-fixbar-top{
         font-size: 35px;
         background-color: rgba(0,0,0,.3);
         cursor: pointer;
     }
   .layui-fixbar-down{
       font-size: 35px;
       background-color: rgba(0,0,0,.3);
       cursor: pointer;
   }
</style>

 

頁面部分：

<ul class="fix_bar">
    <li class="layui-icon layui-fixbar-top" id="to_top" title="返回頂部">頂部圖標</li>
    <li class="layui-icon layui-fixbar-down" id="to_bottom" title="去底部">底部圖標</li>
</ul>

　　

javascript部分：

//回到頂部
        $("#to_top").click(function() {
             $("html,body").animate({scrollTop:0}, 200);
        });
         $(document).scroll(function(){
            var scroll_top =  $(document).scrollTop();
            if(scroll_top > 800){
                 $("#to_top").show();
            }else{
                 $("#to_top").hide();
            }
        });
//去底部
        $("#to_bottom").click(function() {
            $("html,body").animate({scrollTop:document.body.clientHeight + 'px'}, 200);
        });
         $(document).scroll(function(){
            var  scroll_top = $(document).scrollTop();
            if(scroll_top < 800){
                $("#to_bottom").show();
            }else{
                 $("#to_bottom").hide();
            }
        });

　　

其實自己寫一份也很容易，只是后端開發還是怕麻煩，直接用比較省力哈。喜歡就拿走吧，別忘了頂一下。