Link 到另一个页面，滚动到 div 锚点

Question

是否可以 link 指向您网站上的另一个页面，但浏览器是否滚动到锚点 div？例如，我网站的大部分内容都在主页上，div位于关于、联系等部分

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

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

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

JS：

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

Answer 1

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

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

Answer 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 相匹配。

Link 到另一个页面，滚动到 div 锚点

Link to another page, scrolled to a div anchor

html

anchor

jquery

hyperlink

scrolltop