jQuery "Back-to-top"箭头在滚动前跳到页面顶部

Question

我有一个静态的html/css/js网页，它有一个jQuery返回顶部按钮，在页面向下滚动20px后出现在底部。箭头、滚动等都很好用，除了一个困扰我的超级烦人的错误：

当我单击"返回顶部"箭头时，箭头本身会跳到屏幕顶部一秒钟，然后它返回到正确的位置，页面会像预期的那样滚动。这是一个 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

这里有向上+向下的解决方案。

<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>