當jQuery添加上面點擊按鈕時，防止頁面移動

Question

我在頁面上有三個部分，從上到下，A，B和C.您點擊C部分的按鈕。現在，一些內容被加載在A部分（您點擊的按鈕上方），例如內容使用jQuery的slideDown()方法。

現在，C節滾動一點點（因爲新的內容正在這樣做）。這就是我想要阻止的。有沒有辦法讓瀏覽器自動滾動頁面到與加載內容之前完全相同的位置？

Answer 1

你Migt使用＃錨定標記中的href屬性使用javascript:void(0);然後你的頁面將不會滾動。

Answer 2

如果你想確保按鈕不會在屏幕上移動可言，即使內容是它上面添加，這應該這樣做：

$("mybutton").click(function() { 
    //Save the vertical position of the button before content is added. 
    var x1 = $(this).offset().top; 
    //Do whatever the button is suppose to do, including adding the new content. 
    doAllTheStuff(); 
    //See how much we moved. 
    var x2 = $(this).offset().top; 
    var dx = x2 - x1; 
    //Scroll the same amount to keep the button from moving on the screen. 
    $(document).scrollTop($(document).scrollTop() + dx); 
}); 

如果您正在使用此functionallity很多在你的頁面上，你可能想要更好地包裝代碼。這是一個工作JSFiddle。

這也可能是有趣的閱讀：

• http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
• Maintain page position while page length changes
• jquery - keep window from changing scroll position while prepending items to a list?

Answer 3

您可以滾動頁面元素時，點擊此按鈕（可能你的元素）。

$('html, body').animate({ scrollTop: $("#element").offset().top }, 2000); 

這裏的示例：https://jsfiddle.net/kmser1uh/

UPDATE

在相同的準確位置滾動甲訣竅是保存元件的偏移在頁面中滾動後，和動畫的在點擊按鈕後滾動。

更新例如：

https://jsfiddle.net/kmser1uh/2/

這是節省部分：

var el; 
var elPos; 
var clr; 

$(window).scroll(function(){ 
    clearTimeout(clr); 
    clr = setTimeout(function(){ 
    $('.fullWidthBodyElement').each(function(){ 
    if ($(window).scrollTop() > $(this).offset().top && 
      $(window).scrollTop() < $(this).offset().top + $(this).height()) { 
        el = this; 
        elPos = $(window).scrollTop() - $(this).offset().top; 
     } 
     }); 
    },500); 
}); 

而這種恢復位置：

$('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);