這對jQuery/JavaScript專家來說可能很簡單，但我無法在網絡上找到解決方案。刪除/避免添加目標鏈接到URL
案例
我有一個頁面，說：Back to Top底部的鏈接時，鏈接簡直像這樣的目標鏈接：
<a href="#top" class="standard">Back to Top</a>
所以，當你點擊它，它跳躍到頁面頂部。簡單。
問題
當點擊目標鏈接，該ID #top被添加到頁面的URL，即：
http://website.com/about-us/#top
問題
是否有辦法刪除或避免獲取該ID爲#top添加到頁面的URL，但保留頁面的功能跳轉到頂部？
任何幫助，這是非常感謝。
在這兩種情況下（jQuery的或香草的JavaScript），你要做到以下幾點：
href設置所有錨標籤到#topfalse防止默認鏈接行爲click事件的所有節點的發現要跳到你有幾種選擇。我在下面的第一個例子中提供了它們（特定於jQuery和JS）。
使用jQuery
jQuery讓選擇和結合於click事件容易。然後，您可以使用jQuery或直接JavaScript跳到頁面的頂部。
$('a[href="#top"]').click(function() {
//
// To jump, pick one...
//
// Vanilla JS Jump
window.scroll(0,0)
// Another Vanilla JS Jump
window.scrollTo(0,0)
// jQuery Jump
$('html,body').scrollTop(0);
// Fancy jQuery Animated Scrolling
$('html,body').animate({ scrollTop: 0 }, 'slow');
//
// ...then prevent the default behavior by returning false.
//
return false;
});
jQuery的animate提供對動畫的持續時間，並設置回調的能力，緩解一起選項。
香草的JavaScript
您還可以使用香草JS全路通過...查詢和有約束力的，然而，變得更痛苦一點。
現代瀏覽器都支持document.querySelectorAll()這將讓您抓住所有的鏈接元素，就像你用jQuery：
var links = document.querySelectorAll('a[href="#top"]');
然後遍歷所有的元素，並結合「跳」：
for (var i = links.length - 1; i >= 0; i--) {
links[i].onclick = function() { window.scroll(); return false; };
};
如果您的目標瀏覽器不向您贈送querySelectorAll，您只需遍歷所有錨定標記即可找到與#top鏈接的鏈接：
var links = document.body.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
var l = links[i];
if(l.getAttribute('href') === '#top') {
l.onclick = function() { window.scroll(); return false; }
}
}
處理定位點擊事件時，始終使用e.preventDefault();單擊定位元素。當你不需要錨元素時。
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'slow');
您的解決方案效果很好，謝謝。給了upvote。 –
這將工作
$('a.standard').click(function() {
$('body,html').animate({
scrollTop: 0
});
});
您的解決方案效果很好，謝謝。給你一個upvote。 –
$('a[href=#top]').click(function(){
$(window).scrollTop(0);
return false;
});
您需要停止標籤a的默認事件才能觸發。
您的解決方案效果很好，謝謝。給你一個upvote。 –
好啊！這工作完美。解釋很好，謝謝你擴展你的答案。 –