Question

我有一个静态的html / css / js网页，它有一个jQuery Back-to-Top按钮，在页面向下滚动20px后显示在底部。箭头，滚动等都很有效，除了一个令我困扰的超级烦人的bug：

当我点击Back-to-Top箭头时，箭头本身会跳到屏幕顶部一秒钟，然后它返回到它的正确位置并且页面滚动喜欢它应该。这是一个gif截图。仔细观察;箭头跳得很快： https://drive.google.com/open?id=0B243NwSBmRtdUDRvczZMQ0p6QVE

这是HTML：

...</nav>
<a href="#" id="toTopBtn">
    <img src="img/arrow-up-white.png" alt="Back to Top" title="Back to Top"/>
</a>
<section ...

CSS：

/** BACK TO TOP **/
#toTopBtn {
    display: none; position: fixed;
    bottom: 20px; right: 30px;
    z-index: 98; padding: 15px; 
}
#toTopBtn img {width:80%;}
#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

和Javascript / Jquery：

/******* BACK TO TOP BUTTON *******/
window.onscroll = function() {scrollFunction()};

// Show "Back to Top" button when user scrolls down 20px from the top of the document
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        $("#toTopBtn").style.display = "block";
    } else {
        $("#toTopBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
$("#toTopBtn").click(function() {
    $('html, body').animate({
      scrollTop: $("section#home").offset().top }, 1000);
});

有关如何解决此问题的任何提示？

Answer 1

我一直在很多网站上使用这个，一切运作良好所以试一试。

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 20) {
      $('#toTopBtn').fadeIn();
    } else {
      $('#toTopBtn').fadeOut();
    }
  });

  $('#toTopBtn').click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 1000);
    return false;
  });
});

/** BACK TO TOP **/

#toTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 98;
  padding: 15px;
}

#toTopBtn img {
  width: 80%;
}

#myBtn:hover {
  background-color: #555;
  /* Add a dark-grey background on hover */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="toTopBtn">
  <img src="http://placehold.it/50x50" alt="Back to Top" title="Back to Top" />
</span>
<pre>
  a
  a
  a
  a
  a
  
   a
  a
  a
  a
  a
   a
  a
  a
  a
  a a
  a
  a
  a
  a a
  a
  a
  a
  a
  b
  b
  b
  b
  b
    b
  b
  b
  b
  b
  b  b
  b
  b
  b
  b
  b  b
  b
  b
  b
  b
  b  b
  b
  b
  b
  b
  b2
  2
  2
  2
  2
  2
  2
  2
  2
  2
  2
  b
</pre>

Answer 2

这里您可以使用Up + Down的解决方案。

    <span id="toTopBtn">
      <img src="http://placehold.it/50x50" alt="Back to Top" title="Back to Top" />
    </span>
    <span id="toBottomBtn">
      <img src="http://placehold.it/50x50" alt="Back to Bottom" title="Back to Bottom" />
    </span>

    <style>     
        #toTopBtn {
          display: none;
          position: fixed;
          bottom: 20px;
          right: 30px;
          z-index: 98;
        }

        #toTopBtn img {
          width: 80%;
        }

        #myBtn:hover {
          background-color: #555;
          /* Add a dark-grey background on hover */
        }

        #toBottomBtn {
          display: none;
          position: fixed;
          bottom: 20px;
          right: 75px;
          z-index: 98;
        }

        #toBottomBtn img {
          width: 80%;
        }
    </style>

    <script>
      $(function(){
          $(window).scroll(function() {
            if ($(this).scrollTop() > 20) {
              $('#toTopBtn').fadeIn();
            } else {
              $('#toTopBtn').fadeOut();
            }
          });

          $('#toTopBtn').click(function() {
            $("html, body").animate({
              scrollTop: 0
            }, 1000);
            return false;
          });

          $(window).scroll(function() {
            if (($(document).height() - $(window).height() - $(window).scrollTop()) == 0) {
              $('#toBottomBtn').fadeOut();
            } else {
              $('#toBottomBtn').fadeIn();
            }
          });

          $('#toBottomBtn').click(function() {
            $("html, body").animate({
              scrollTop: $(document).height()
            }, 1000);
            return false;
          });
      });
    </script>

jQuery“Back-to-top”箭头在滚动之前跳转到页面顶部

2 个答案: