Question

我目前正在Wordpress上运行测试网站。我的页面有几个div，上面有ID，顶部有一个菜单，其中包含导致这些ID的锚点。我的标题是粘性的，所以当我单击一个锚点时，它会导航到div ID，但div的开头会隐藏在标题下方。我想这样，当我点击一个锚点时，它会导航到div，但上面几个像素。我设法做到了，虽然有点问题。

(function($,document){
  $("a[href^='#']").click(function(){
    var url = $(this).attr('href');
    $('html,body').animate({scrollTop: $(url).offset().top - 90}, 2000);
  });
})(jQuery);

会发生什么：

我点击了一个带有href =“＃someid”
我的浏览器导航到#someid，偏移量为-90px（到目前为止效果很好）
然后我的浏览器向下滚动90px到div #someid在视口开头（并在粘贴标题后面）开始的位置。
最后，我的网址更改为http://example.com/#someid

我只想删除第3步。非常感谢任何帮助。

更新：我刚刚发现我的主题是安装了jQuery“One-page-nav”插件并且它正在干扰。仍然试图了解它是如何工作的，如果我可以修改它以产生偏移

Answer 1

我遇到了同样的问题，在我的情况下，我通过添加相同值的padding-top和负margin-top来解决了这个问题：

.some-class {
  padding-top: 4em;
  margin-top: -4em;
}

这样做，我的元素看起来就在完全相同的位置，但是浏览器在滚动时会更快地找到它。您可以将这些值设置为粘性页眉的高度，也可以随意摆放以确保标题正好位于您想要的位置。

我希望我以一种可以理解的方式来解释这一点……在我看来，这确实是有道理的：D

使用偏移滚动到div ID

1 个答案: