jQuery“返回顶部”箭头在滚动前跳转到页面顶部

Question

I have a static html/css/js webpage which has a jQuery Back-to-Top button that appears at the bottom after the page has scrolled down 20px. The arrow, scrolling, etc all work great, except for one super-annoying bug that's bothering me:

When I click on the Back-to-Top arrow, the arrow itself jumps up to the top of the screen for literally a second, and then it returns to it's proper spot and the page scrolls like it's supposed to. Here's a gif screenshot. Watch it carefully; the arrow jumps very quickly: https://drive.google.com/open?id=0B243NwSBmRtdUDRvczZMQ0p6QVE

And here's the HTML:

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

And the 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 */
}

And the 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);
});

Any tips for how to fix this?

Answer 1

I have been using this one on many sites, all working well so give a try.

 $(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 aa a a a aa a a a a b b b b b b b b b b bb b b b b bb b b b b bb b b b b b2 2 2 2 2 2 2 2 2 2 2 b </pre>

Answer 2

Here you have solution for 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>