在页面锚滚动和偏移标题答案

【问题标题】：on page anchor scroll and offset header在页面锚滚动和偏移标题
【发布时间】：2017-03-07 16:39:58
【问题描述】：

如何在使用辅助锚点进行页面导航时偏移顶部导航的高度？

我使用 :target 和填充。它可以工作，但是当您滚动时，您会看到元素之间的这种额外填充。

我尝试了 js，但我认为 window.scrollBy 发生在锚滚动之前/期间。如果我连续点击多次，它最终会给出想要的结果...

如何在锚点操作之后延迟滚动？ http://codepen.io/jeffreyb42/pen/xqRRMY

$(function(){
  $('.side-nav').on('click', function(){
    window.scrollBy(0, -70);
    console.log("should have scrolled...")
  });
});

【问题讨论】：

欢迎来到 Stack Overflow！请在问题本身的minimal reproducible example 中提供所有相关代码，而不仅仅是在第三方网站上。

标签： javascript jquery html css

【解决方案1】：

像这样改变你的 jQuery 代码：

$(function(){
 $('.side-nav li a').on('click', function(e){
 e.preventDefault();     
 var scrollTo=$($(this).attr('href'));    
  $('html,body').animate({
    scrollTop: scrollTo.offset().top - $('.header').height()},
    'slow');
  });

});

Demo

【讨论】：

谢谢！正是我需要的:)
现在有没有办法在页面之间导航时做到这一点？我的网站有几个页面，它们之间有链接。在页面之间使用这些锚点时，h1 位于标题栏后面。