jquery实现返回顶部按钮和scroll滚动功能[带动画效果]

墨蓝 2022-06-13 10:24 245阅读 0赞

jQuery脚本：

![复制代码][copycode.gif]

1 <script type="text/javascript">
     2         $(function() {
       
     3             var scrollDiv = document.createElement('div');
     4             $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');
     5             $(window).scroll(function() {
       
     6                 if ($(this).scrollTop() != 0) {
       
     7                     $('#toTop').fadeIn();
     8                 } else {
       
     9                     $('#toTop').fadeOut();
    10                 }
    11             });
    12             $('#toTop').click(function() {
       
    13                 $('body,html').animate({ scrollTop: 0 }, 800);
    14             })
    15         });
    16     </script>

![复制代码][copycode.gif]

CSS样式：

![复制代码][copycode.gif]

1 <style type="text/css">
     2         #toTop
     3 {
       
     4             width: 100px;
     5             z-index: 10;
     6             border: 1px solid #333;
     7             background: #121212;
     8             text-align: center;
     9             padding: 5px;
    10             position: fixed;
    11             bottom: 0px;
    12             right: 0px;
    13             cursor: pointer;
    14             display: none;
    15             color: #fff;
    16             text-transform: lowercase;
    17             font-size: 0.9em;
    18 }
    19     </style>

![复制代码][copycode.gif]

带有iframe框架的滚动操作：

![复制代码][copycode.gif]

1  <script type="text/javascript">
     2 
    44     </script>

![复制代码][copycode.gif]

[copycode.gif]: /images/20220613/8109f3de9ae440c1a832698e054b4aa3.png