的Javascript/jQuery的scrollTop的問題

我重新創造了什麼，我試圖做here (jsFiddle)的Javascript/jQuery的scrollTop的問題

頭應該留在它是一個簡單的版本，當你向下滾動，當你點擊標題的div它應該回滾到頂端，它就是這樣。但是，如果您專注於輸入內容，或者點擊「徽標」，則滾動應該保持原位。

我嘗試過的第一種方法是使用jQuery的.css並將輸入/徽標的z-index設置爲高於標題，然後獲取當前滾動並將其保留在該位置。

這類作品，但一旦你點擊輸入或標誌，標題滾動不再起作用。

我也嘗試改變徽標/輸入jQuery到.animate慢速，它保持靜止幾秒鐘，然後滾動到頂端，即使我沒有設置它這樣做。以下是第二個示例 - jsFiddle

但是，使用第二個示例執行此操作並不會停止其他函數的工作。

這種行爲我有什麼缺點嗎？

來源

2011-11-22 Joe

您可以阻止點擊事件傳播到頭部。

$("#logo, #input").click(function(e) { 
    e.stopPropagation(); 
});

來源

2011-11-22 20:59:03

偉大工程，感謝史蒂夫！ :) – Joe

所有你需要做的就是停止事件的發生。要做到這一點，你從你的點擊功能返回false。

$("#logo, #input").click(function() { 
    return false; // Add this line 
});

這裏是你的小提琴更新：http://jsfiddle.net/BRnvT/

來源

2011-11-22 20:57:59

我相信這也會使容器內的無用的所有點擊，以及，這可能會造成問題的任擇議定書。 –

史蒂夫的回答更合適。我的解決方案還添加了e.preventDefault（），如果徽標是鏈接，那麼這是不理想的。你可以閱讀更多在 http://api.jquery.com/event.preventDefault/ http://api.jquery.com/event.stopPropagation/ –

這是工作，但你已經指出，徽標是一個鏈接在真正的版本，這將導致它無用的導航，所以'stopPropagation'更適合我想要的，但仍然謝謝你的答案:) – Joe

看看這個有趣的article有關事件順序，所有你需要做的是停止傳播。在這裏您修改Fiddle

$("#logo, #input").click(function(e) { 
    e.stopPropagation(); 
    var y = window.scrollY; 

    $('html').animate({ 
     scrollTop: y 
    }, 'slow'); 
    $('body').animate({ 
     scrollTop: y 
    }, 'slow'); 
});

來源

2011-11-22 21:02:33

+1相同的答案和文章鏈接，謝謝！ – Joe

的Javascript/jQuery的scrollTop的問題

回答

相關問題