我有一個靜態的html/css/js網頁,它有一個jQuery Back-to-Top按鈕,它在頁面向下滾動後出現20像素。箭頭,滾動等所有工作的偉大,除了一個超級討厭的臭蟲困擾着我:jQuery「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);
});
任何提示如何解決這個問題?
你有一個活鏈接到您的網站? –
http://studentweb.mga.edu/shira.shkarofsky/ - 這是我正在進行的**組合;)所以不要指望它上面的所有東西都能正常工作......(箭頭錯誤顯示在那裏,雖然) –