刘鹏博的博客

付出不亚于任何人的努力

jQuery实现返回顶部

jQuery实现返回顶部(gotop)

        最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不是很好。因为没有视觉缓冲。所以,下面用 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 返回顶部-->


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

阅读更多

扫码向博主提问

去开通我的Chat快问

qq_40087415

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Hadoop
  • Java
  • MySQL
  • CSS3
  • H5
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_40087415/article/details/79950051
文章标签: jQuery 返回顶部 JS
个人分类: Web前端 JQuery
上一篇CSS实现文本溢出时显示省略号...
下一篇SVN服务器的本地搭建与在MyEclipse中使用详解
想对作者说点什么? 我来说一句

各种顶代码实例

2012年08月10日 30KB 下载

jQuery锚点动画跳转顶部效果

2014年08月08日 39KB 下载

jquery实现返回顶部按钮demo

2014年08月11日 1KB 下载

没有更多推荐了,返回首页

关闭
关闭