回顶部.gif

JS 部分

  1. /*回顶部
  2.  *@method showLoading
  3.  *@for
  4.  *@param{string}target: 会顶部容器的选择器
  5.  *@return {void}
  6. */
  7. function gotop(target) {
  8.     $(document).scroll(function() {
  9.         var scroH = $(document).scrollTop();  //滚动高度
  10.         if(scroH > 100) {
  11.             $(target).fadeIn(200);
  12.         }else {
  13.             $(target).fadeOut(200);
  14.         }
  15.     });
  16.     $(target).click(function() {
  17.         $('body,html').animate({
  18.             scrollTop: 0
  19.           }, 500);
  20.           return false;
  21.     });
  22. }

HTML部分

  1. <div class="gotop-articleDetail">
  2.     <img src="../imgs/gotop.png" alt="" class="img">
  3. </div>

CSS部分

  1. .gotop {
  2.   position: fixed;
  3.   width: 10.67vw;
  4.   height: 10.67vw;
  5.   background-color: #9ea8d2;
  6.   border-radius: 50%;
  7.   overflow: hidden;
  8.   opacity: 0.8;
  9.   right: 4.67vw;
  10.   bottom: 7.07vw;
  11.   box-sizing: border-box;
  12.   padding: 2.8vw;
  13.   display: none;
  14.   z-index: 1000;
  15. }
  16. .gotop-articleDetail {
  17.   position: fixed;
  18.   width: 10.67vw;
  19.   height: 10.67vw;
  20.   background-color: #9ea8d2;
  21.   border-radius: 50%;
  22.   overflow: hidden;
  23.   opacity: 0.8;
  24.   right: 4.67vw;
  25.   bottom: 20.07vw;
  26.   box-sizing: border-box;
  27.   padding: 2.8vw;
  28.   display: none;
  29. }