当前位置：首页> 文章> JS
全部 45 CSS 18 HTML 6 SEO 2 JS 6 服务器 1 Vue 10 小程序 1 PHP 1

jQuery实现返回顶部效果

：2019-05-13   ：舒彬琪   ：82

案例原理
1.当a标签距离顶部100px以上时，a标签显示
反之则a标签隐藏
2.a标签显示后，点击a标签实现返回顶部效果
$('body,html').animate({scrollTop:0},500); 这段代码是关键

scrollTop定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

所以这段代码的意思就是滚动到距离顶部0的位置，即返回顶部，500代表0.5s，可以进行修改具体时长


全部代码

  1.  <!doctype html>

  2.  <html>

  3. <head>

  4. <meta charset="utf-8">

  5. <title>jquery返回顶部</title>

  6. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

  7. <style type="text/css">

  8. *{margin: 0;padding: 0;}

  9. #wrapper{margin: 0 auto;width: 480px;}

  10. .cont1{height: 500px;background-color: skyblue;}

  11. .cont2{height: 500px;background-color: pink;}

  12. .cont3{height: 500px;background-color: blueviolet;}

  13. #toTop {display: none;text-decoration: none;position: fixed;border-radius: 5px;bottom: 50px;right: 50px;overflow: hidden;width: 50px;height: 50px;border: none;text-indent: 100%;background: url(images/top-arrow.png) no-repeat #1F2729 10px 15px;text-align: center;}

  14. </style>

  15. </head>

  16. <body>

  17. <div id="wrapper">

  18.     <div class="cont1"></div>

  19.     <div class="cont2"></div>

  20.     <div class="cont3"></div>

  21.     <!-- a样式可通过css添加背景图片或者直接放置文字 -->

  22.     <a href="javascript:void(0)" id="toTop" style="display: block;color: #fff"></a>

  23. </div>


  25. <script type="text/javascript">

  26. $(function(){

  27.     // 当滚动条的位置处于距顶部100像素以上时，跳转链接出现，否则消失

  28.     $(function () {

  29.         $(window).scroll(function(){

  30.             if ($(window).scrollTop()>100){

  31.                 $("#toTop").fadeIn(500);

  32.             }

  33.             else

  34.             {

  35.                 $("#toTop").fadeOut(1000);

  36.             }

  37.         });

  38.         // 当点击返回顶部按钮后，回到页面顶部位置

  39.         $("#toTop").click(function(){

  40.             $('body,html').animate({scrollTop:0},500);

  41.             return false;

  42.         });

  43.     });

  44. });

  45. </script>

  46. </body>

  47. </html>


上一篇：JavaScript综合内容

下一篇：ES6 基础

Copyright © 2018-现在 PbootMoBan All Rights Reserved. 免责声明：网站中图片均来源于网络，如有版权问题请联系删除！