用jQuery实现由底部返回顶部

功能实现网页由底部快速滑到到顶部
主要用到了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
        );
      });