爲什麼jQuery讓我的頁面在點擊後跳回頂部？

我有一個關於jQuery的一般性問題。爲什麼jQuery讓我的頁面在點擊後跳回頂部？

我創建了幾個jQuery按鈕，但我遇到的問題是當您向下滾動頁面一半，然後按下按鈕，頁面跳回到頂部，而不是停留在中間的按鈕？

你怎麼能阻止這種情況發生，因爲它是令用戶感到沮喪的？

有什麼特別的原因爲什麼會發生？

$(".comment-here").click(function() { 
    $(".comment-form").slideToggle('slow'); 
}); 

$(".main-btn.orange").click(function(){ 
    $(".comment-form").slideUp('slow'); 
});

來源

2013-11-27 user2965875

我要說的卻是使用''

您並未阻止默認事件。由於您點擊了定位標記，因此#的默認活動只是跳到文檔的頂部。

爲了防止這種情況的發生：

傳遞事件到函數，並且使用的preventDefault（）;

$(".comment-here").click(function(e){ 
    e.preventDefault(); 
    $(".comment-form").slideToggle('slow'); 
}) 

$(".main-btn.orange").click(function(e){ 
    e.preventDefault(); 
    $(".comment-form").slideUp('slow'); 
})

你也可以使用return false;代替，這進一步去有點不僅僅是防止默認事件，它將停止事件bubbling高達parent元素。

來源

2013-11-27 16:25:07

「真的沒有黑暗的一面，事實上它全是黑暗的」 –

我使用了「返回false」。我的問題是不同的。我打電話給javascript來擴展手風琴，但是當它擴大時，窗口也轉移到了手風琴。我想要的是當手風琴不斷擴展時，窗戶將保持在原來的位置。所以「返回假」是解決方案。 tnx –

添加return false;到<a class="comment-here">的點擊處理程序。

本質上它不是jQuery，但默認的瀏覽器行爲導致這種情況：您單擊了一個鏈接，它必須導航到它的href，即... "#"，即此頁面。所以我們回到這個頁面（頂部）。

來源

2013-11-27 16:24:31

錨標記的防止默認行爲：

$(".comment-here").click(function(e){ 
    e.preventDefault(); 
    //.... 
});

來源

2013-11-27 16:25:19

的問題是使用href="#"它引用當前頁和拉你到頂部的<a>標籤。

我會推薦以下方法，而不是其他答案中提到的默認事件預防。當然，這些工作，但爲什麼只使用一個元素來刪除它的默認功能？

人體工程學，使用的東西是爲你的目的：使用<a>

http://jsfiddle.net/RvHjx/7/

2）如果你是死心塌地：

1）使用的<button>代替<a> ，請刪除<a>標記中的href屬性。這將刪除藍色下劃線的鏈接樣式（鏈接功能仍然正常，雖然），但它很容易與一些CSS來解決：

http://jsfiddle.net/RvHjx/11/

來源

2013-11-27 16:47:23 skippr

從a標籤中刪除href不是最佳做法 – SlickRemix

@SlickRemix您是否閱讀我的文章？我不建議這樣做，但是如果用戶只是「死定了」的話就提出了這個選項。 – skippr

@skipper，爲了公平，我做了，但仍然想要注意，因爲還有一些其他的解決方法，對不起，我太矮了......其中一個我用了很長時間的是href =「javascript :;」 ...添加＃總是有混雜的結果，因爲我們知道和元素結構保持適當。 – SlickRemix

添加JavaScript :;給你的標籤href是最簡單的方法。

<a href="javascript:;">my link</a>

來源

2017-10-08 16:50:15 SlickRemix

爲什麼jQuery讓我的頁面在點擊後跳回頂部？

回答

相關問題