jQuery实现返回顶部

jQuery实现返回顶部jQuery实现返回顶部(gotop)      最常见的返回顶部大多是用js或者jQ写出来的,但也有少部分直接用的HTML锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不是很好。因为没有视觉缓冲。所以,下面用jQuery写一个简单常用的返回顶部效果。效果如图:实现代码:html关键代码:<aclass="gotop"href="javascript:;"&…

jQuery实现返回顶部(gotop)

        最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 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 返回顶部-->

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

今天的文章jQuery实现返回顶部分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/5278.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注