“返回顶部”按钮是用于网站版面过长时，用户点击后直接拉到网站的顶部，可以节省网站用户拖动的时间。

今天教大家制作“返回顶部”按钮，它可以自动判断用户所处的网页的位置，如果在顶部，则不显示“返回顶部”按钮，如果不在顶部，则显示出“返回顶部”按钮。如下图：

方法/步骤

1.在HTML页面底部添加以下的代码，用于显示一个“返回顶部”按钮。

<div id="goTopBtn"><span class="glyphicon glyphicon-chevron-up">&Delta;</span></div>

2.在CSS样式中添加以下的CSS代码，用于控制“返回顶部”按钮的样式。

#goTopBtn {
    position: fixed;
    line-height: 46px;
    text-align: center;
    width: 46px;
    bottom: 35px;
    height: 46px;
    cursor: pointer;
    background: #fff;
    display: none;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.13);
    font-size: 22px;
    color: #999;
}

3.在网页的底部放上以下的jquery代码，用于控制“返回顶部”按钮什么时候显示，什么时候隐藏。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
/*返回顶部*/
$(window).scroll(function(){
   var sc=$(window).scrollTop();
   var rwidth=$(window).width()
   if(sc>0){
    $("#goTopBtn").css("display","block");
    $("#goTopBtn").css("left",(rwidth-36)+"px")
   }else{
   $("#goTopBtn").css("display","none");
   }
 })
 $("#goTopBtn").click(function(){
   var sc=$(window).scrollTop();
   $('body,html').animate({scrollTop:0},500);
 })
   </script>

标签：返回,顶部,goTopBtn,代码,window,46px,按钮
来源： https://www.cnblogs.com/wdysblog/p/16610767.html