jQuery scrollTop视图问题.如何为position().top添加自定义值

Question

我正在开发一个单页wordpress网站。因为它是单页的，所以我使用jQuery scrollTop来动画菜单。我想去特定的div当我点击相应的菜单链接div id..当前的问题是固定位置的菜单选项卡正在交叉内容..它显示了div内容(viewport问题)。

我想给这个菜单选项卡和div内容之间的空白，使内容完全可见。

用于滚动效果的jQuery代码如下:

$(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;
  });
});

我需要的是添加一些值，如200px到上面的div的顶部位置".position()。top}"这样我就可以滚动到div顶部以下的位置…

编辑:"对不起……我在上述要求上犯了一个错误。我必须从div的顶部位置减去一个值，以便我可以滚动到div顶部上方的位置。"

如何解决这个问题?如有任何帮助，不胜感激。

Thanks in advance.

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;
   });
});