jQuery实现页面回到顶部

JQuery点击事件回到页面顶部效果

---

 最常见的返回顶部大多是用 js 或者 jQuery写出来的，但也有少部分直接用的 HTML 锚点实现的，自我感觉还是jQuery比较简便，效果也更好。所以，下面用 jQuery 写一个简单常用的返回顶部效果。

首先我们来完成HTML的简单网页代码：

<a class="gotop" href="javascript:;">
    <i class="iconfont icon-fanhuidingbu3 right-icon"></i>
</a>

然后是jQuery的关键代码：

<!--引入jQuery类库-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--start 返回顶部-->
<script>
    $(function() {
        $(".gotop").hide();
        $(window).bind('scroll',function(){
            if($(window).scrollTop()<=300){
                $(".gotop").hide();
               }else{
                $(".gotop").show();
            }
        });
        $(".gotop").bind("click",function(){
            $('html, body').animate({scrollTop: 0},300);
        });
   });
</script>
<!--end 返回顶部-->

其实方法多种多样，只要能针对当下的问题得以最好的解决就是好方法。