从不同页面单击时锚链接的滚动顶部偏移量不起作用答案

【问题标题】：scrollTop offset for anchor links not working when clicking from a different page从不同页面单击时锚链接的滚动顶部偏移量不起作用
【发布时间】：2016-09-27 19:03:30
【问题描述】：

我的网站上有一个固定位置的标题，当用户向下滚动时，它会固定在屏幕顶部。该站点的导航包括两个向下滚动到主页上相应部分的锚链接，然后是一个指向不同页面（博客）的链接。这是我用于平滑滚动锚链接的代码：

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - $('header').height()
        }, 600);
        return false;
      }
    }
  });
});

主页上的一切都很好。我遇到的问题是当您在博客页面上单击主页的两个锚链接之一时。从技术上讲，它会出现在主页上应该出现的位置，但它不会像您已经在主页上时那样将位置偏移标题的高度。

我一点也不擅长 javascript。我在网上找到了这段代码（并在这个网站上获得了一些关于偏移的帮助）。我真的很努力，但还没有点击。为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： javascript jquery anchor

【解决方案1】：

您的问题是您拥有的代码仅适用于点击事件。因此，当您在 url 中加载带有锚点的页面时，不会触发滚动到事件。

您需要一些仅在页面加载时触发的额外代码。

$(document).ready(function() { 
  var elem = $('#_' + window.location.hash.replace('#', ''));
  if (elem) {
    $.scrollTo(elem.left, elem.top);
  }
});

【讨论】：

我试过了，不幸的是它仍然在做同样的事情。