jQuery实现返回顶部

原创 2018年04月15日 16:21:47

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 返回顶部-->


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

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_40087415/article/details/79950051

“返回顶部代码”滑动效果 jQuery超级简单实用写法

东西很简单,还是利用jQuery,直接代码:   html代码,一般放在footer.php里:   a href="#" id="top"> 返 回 顶 部 a> CSS代...
  • xllily_11
  • xllily_11
  • 2015-07-14 11:48:43
  • 1394

各种顶代码实例

  • 2012年08月10日 16:48
  • 30KB
  • 下载

jquery实现右侧显示分享类按钮及返回顶部按钮插件

  • 2014年01月24日 14:47
  • 72KB
  • 下载

jquery实现返回顶部按钮demo

  • 2014年08月11日 17:00
  • 1KB
  • 下载

QQ在线客服,帅气的返回顶部,Jquery实现

  • 2011年11月15日 14:01
  • 27KB
  • 下载

jquery实现返回顶部

  • 2015年04月11日 12:31
  • 394KB
  • 下载

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

//2个div,点击某个时回到顶部 111111111111111  top $(function(){   $("#top").click(function() {       $...
  • zhuyu19911016520
  • zhuyu19911016520
  • 2013-09-27 08:37:03
  • 32698

jquery实现返回顶部源代码

  • 2016年01月31日 11:33
  • 102KB
  • 下载

jQuery实现一个动画版返回顶部和底部的效果

  • 2013年03月21日 13:42
  • 3KB
  • 下载

js实现返回顶部功能的解决方案

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素: 返回顶部 其中a标签指向锚点top,可以在顶部防止一个的锚点,这样在浏览器...
  • xiebaochun
  • xiebaochun
  • 2014-08-19 06:21:36
  • 50045
收藏助手
不良信息举报
您举报文章:jQuery实现返回顶部
举报原因:
原因补充:

(最多只允许输入30个字)