链接到另一个页面，滚动到一个 div 锚点答案

【问题标题】：Link to another page, scrolled to a div anchor链接到另一个页面，滚动到一个 div 锚点
【发布时间】：2017-03-05 16:11:27
【问题描述】：

是否可以在您的网站上提供指向另一个页面的链接，但浏览器是否滚动到锚点 div？例如，我网站的大部分内容都在首页上，分为关于、联系方式等部分。

我希望能够从另一个子页面链接到这些 div 之一。

以下代码就是这样做的，但仅当链接与目标位于同一页面上时才有效：

<a href="#about" id="about-link">About</a>

JS：

$("#about-link").click(function() {
  $('html, body').animate({
    scrollTop: $(".wrapper_about").offset().top
  }, 0);
});

【问题讨论】：

标签： jquery html hyperlink anchor scrolltop

【解决方案1】：

您的链接必须包含其他页面的文件名（和文件路径，如果它不在同一目录中）：

<a href="other_page.html#about" id="about-link">About</a>

【讨论】：

在应用您的更改之前，链接目标将等于“example.com/subpage/#about”而不是 example.com/#about。随着您的更改，网址目标是正确的，它会将我带到主页，但没有滚动到锚点。
我应该注意到这是一个wordpress安装，所以我应用了“index.php#about”
这取决于您的锚点 ID：在您的示例 HTML 中，您有 #about，但在您的 jQuery 中，您有 .wrapper_about (?)
嗯，#about-link 是触发点击 jQuery 的链接 ID，.about_wrapper 是滚动顶部偏移目标，href 我设置为#about，但我的理解是刚刚修改为URL 看起来不错，如果我将 ahref 更改为 #test 之类的内容，代码在链接不在另一个页面上的工作场景中仍然有效。
你说得对，锚元素的 ID 必须与 href 匹配才能在链接到不同页面时起作用，我还必须将滚动顶部偏移量更改为目标 $(window.location.hash ) 而不是锚 div。感谢您的帮助！

【解决方案2】：

我已经通过应用这个方法让它工作了：

<a href="#about" id="about-link">About</a>

JS：

$("#about-link").click(function() {
  $('html, body').animate({
    scrollTop: $(window.location.hash).offset().top // Target hash not div
  }, 0);
});

请务必注意，您的 href 目标必须与您要锚定到的元素的 ID 匹配。

【讨论】：