用jQuery实现由底部返回顶部

最新推荐文章于 2022-11-11 14:48:31 发布

海阔天空BM

最新推荐文章于 2022-11-11 14:48:31 发布

阅读量2.5k

点赞数 3

分类专栏： JS函数 jQuery 文章标签：用jQuery实现由底部返回顶部

本文链接：https://blog.csdn.net/zsm4623/article/details/87189128

版权

JS函数同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

功能实现网页由底部快速滑到到顶部
主要用到了jQuery中的fadeIn()展示，fadeOut() 展出以及animate

css样式

 #toTop {
        position: fixed;
        right: 20px;
        bottom: 25px;
        z-index: 12;
        display: none;
        width: 47px;
        height: 47px;
        text-align: center;
        cursor: pointer;
        color:blueviolet;
      }
      p{
          height: 100px;
      }

html

 <div id="toTop" class="hidden-xs" style="display: none;">返回顶部</div>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>
    <p>滑到顶部</p>

js 编写

$(window).scroll(function() {
        if ($(this).scrollTop() != 0) {
          $("#toTop").fadeIn();
        } else {
          $("#toTop").fadeOut();
        }
      });

      $("#toTop").click(function() {
        $("body,html").animate(
          {
            scrollTop: 0
          },
          800
        );
      });