javascript - 链接到其他页面并滚动到部分

Question

我有 2 个页面，顶部固定了几乎相同的菜单(除了链接)
菜单是指向第 1 页(主页)上的页面部分的链接

菜单页 1

<nav id="mainNav">
   <ul>
      <li><a href="#about">over ons</a></li>
      <li><a href="#services">diensten</a></li>
      <li class="contact"><a href="#contact">contacteer ons</a></li>
   </ul>
</nav>

菜单页 2

<nav id="mainNav">
    <ul>
       <li><a href="/#about">over ons</a></li>
       <li><a href="/#services">diensten</a></li>
       <li class="contact"><a href="/#contact">contacteer ons</a></li>
    </ul>
</nav>

在主页上，当我单击菜单项时，页面会很好地滚动到该部分，而无需在 URL 中添加/#section 之类的内容。为此，我使用:

$("#mainNav ul a, .logo a, .cta a").click(function(e){


var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;


$('html,body').animate({scrollTop:target_top -66}, 800);
    return false;

});

现在，当我进入第 2 页(一个不太重要的内容页面)时，菜单仍然需要适用于我的主页。因此，当我单击菜单项时，它应该返回主页并滚动到该部分。

要求:

• 网址(/#section)中没有污染。
• 标题的大小为 66 像素，因此在该部分实际开始之前它应该滚动到 66 像素。
• 这应该仅适用于第 2 页上的菜单(也许向第 2 页上的 html 添加不同的类？)

对于这种情况有什么想法或最佳实践吗？

Answer 1

使用 localStorage 怎么样？当您在第 2 页上并单击“服务”链接时，您将在 localStorage 中保存相应的值。然后在页面加载时，您检查 localStorage 中的任何值，解释它们，必要时滚动窗口并清除 localStorage 值。