jQuery scrollTop視口問題。如何將自定義值添加到position（）頂部

Question

我正在開發一個單頁的wordpress網站。因爲它是一個單頁面，所以我使用jQuery scrollTop爲菜單設置動畫。我想要去特定的div當我點擊對應的菜單鏈接與div ID .. 當前問題是固定定位菜單選項卡正在穿越內容..它顯示在div內容（視口問題）。

我想給這個菜單選項卡和div內容之間的差距，使內容完全可見。

用於滾動效果

jQuery代碼是如下：「.POSITION（）頂}」

$(document).ready(function() { 

    $('a[href=#welcome]').click(function(){ 

    $('html, body').animate({scrollTop:$('#welcome').position().top}, 'slow'); 

    return false; 

    }); 



}); 


$(document).ready(function() { 

    $('a[href=#aboutus]').click(function(){ 
    $('html, body').animate({scrollTop:$('#aboutus').position().top}, 'slow'); 

    return false; 

    }); 

}); 

我需要的是像200像素添加一些值以上div的頂部位置，這樣我可以滾動到div頂端下方的位置...

編輯：「對不起人們......我在上面的要求中犯了一個錯誤..我必須從div的頂部位置減去一個值，以便我可以滾動到位於頂部以上的位置..「

我該如何解決這個問題？任何幫助將不勝感激..提前

謝謝..

Answer 1

你可以在菜單的高度，例如：

var menuHeight = $('#mainMenu').height(); 

當你做滾動的行：

$('html, body').animate({scrollTop:$('#aboutus').position().top}, 'slow'); 

你減去菜單高度：

$('html, body').animate({scrollTop:$('#aboutus').position().top-menuHeight}, 'slow'); 

未經測試，但我認爲它應該可以工作。 基本上你說滾動到你的div位置，但是在該位置之前的位置將是菜單高度。

Answer 2

我不確定我是否完全理解，但可以將200（自px以來）添加到您的位置。

$(document).ready(function() { 
    var marginTop = 200; // add or remove or even grab the position of another element 

    $('a[href=#aboutus]').click(function(){ 
     $('html, body').animate({scrollTop:$('#aboutus').position().top + marginTop}, 'slow'); 
     return false; 
    }); 
});