如何用jQuery实现页面返回顶部的效果(附代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

大家在浏览网站时有没有发现,往下滑动页面会出现一个返回顶部的按钮,点击就能返回顶部,那你知道HTML页面返回顶部怎么实现的吗?这篇文章就给大家分享最简单的HTML页面返回顶部的jQuery代码,感兴趣的朋友可以参考一下。

实现页面返回顶部的效果需要用到很多JavaScript知识,比如:function(),animate,fadeOut等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程。

实例描述:用户往下滑动页面,当滚动条距离顶部的距离大于100px时,用fadeIn显示返回按钮,当点击按钮返回顶部后,按钮消失,具体代码如下:

HTML部分:

<div id="wrapper">      <div class="cont1"></div>      <div class="cont2"></div>      <div class="cont3"></div>      <div class="cont4"></div>      <a href="javascript:void(0)" id="toTop" style="display: block;">       </a> </div>

CSS部分:

*{margin: 0;padding: 0;}             #wrapper{margin: 0 auto;width: 500px;}             .cont1{height: 500px;background-color: wheat;}             .cont2{height: 500px;background-color: honeydew;}             .cont3{height: 500px;background-color: blueviolet;}             .cont4{height: 500px;background-color: pink;}             #toTop {display: none;text-decoration: none;position: fixed;bottom: 20px;right: 20px;overflow: hidden;width: 50px;height: 50px;background: url(img/icon_top.png) no-repeat center center;}

JavaScript部分:

注:因为用的是jQuery写的,要记得引入jQuery文件啊

$(function(){          //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失          $(function () {              $(window).scroll(function(){                  if ($(window).scrollTop()>100){                      $("#toTop").fadeIn(1000);                  }                  else                  {                      $("#toTop").fadeOut(1000);                  }              });              //当点击跳转链接后,回到页面顶部位置              $("#toTop").click(function(){                  $('body,html').animate({scrollTop:0},1000);                  return false;              });          });     });

效果图:

如何用jQuery实现页面返回顶部的效果(附代码)

以上给大家分享了如何用jQuery实现HTML页面返回顶部的代码,步骤很详细,简单易懂,初学者可以自己动手尝试,看看你的代码能不能实现回到顶部的效果,希望这篇文章对你有所帮助!

【相关教程推荐】

1. jQuery中文参考手册
2. jQuery视频教程
3. bootstrap教程

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何用jQuery实现页面返回顶部的效果(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情