2017-05-16 93 views
0

我有一個靜態的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); 
}); 

任何提示如何解決這個問題?

+0

你有一個活鏈接到您的網站? –

+0

http://studentweb.mga.edu/shira.shkarofsky/ - 這是我正在進行的**組合;)所以不要指望它上面的所有東西都能正常工作......(箭頭錯誤顯示在那裏,雖然) –

回答

0

我一直在很多網站上使用這個,所有的工作都很好,所以試試看。

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

+0

我真的很喜歡你給的jQuery代碼。絕對比我擁有的更清潔和更平滑。 :)不幸的是,即使有了這樣的代碼,當點擊它時,箭頭仍然有點跳躍...... –

+0

@ Sh306我檢查了你的網站,它是在toTopBtn上的keydown/mousedown/onmousedown,因爲它,如果你按下按鈕don發佈,它是浮動頂部,檢查所有與你的CSS和js代碼相關的CSS? keydown mousedown –