Html 滚动导航菜单

目前，我正在处理单个网页，最终输出有一些问题，即当单击链接菜单时，它不会转到目标div位置（如果我错了，请纠正我）。当再次单击链接时，它将转到另一个位置

我遵循这个教程

这是它的复制品

您需要做的是添加缺少的购买部分，并在导航中向链接添加
href
，如：

<nav>
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#tech-spec">Tech Spec</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#buy">Buy</a></li> <!-- You are missing your href attribute here -->
  </ul>
</nav>









其余的一切似乎都很好。
您需要做的是添加缺少的购买部分，并在导航中添加
href
到链接，如：

<nav>
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#tech-spec">Tech Spec</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#buy">Buy</a></li> <!-- You are missing your href attribute here -->
  </ul>
</nav>









所有其他功能似乎都可以正常工作。
我认为我的机器没有问题，但可以用不同的方式处理此功能。请参见下面的示例，这可能会解决问题


添加锚类
添加数据属性
使全局函数滚动到某一点
比如说

<div id="button-name"></div>

现在通常的问题是，它的兼容性如何，我自己在IE9中测试过这个，它是有效的

这个答案可能更像是拆卸而不是修复，但我希望这会有所帮助
我认为我的机器没有问题，但可以用不同的方式处理此功能。请参见下面的示例，这可能会解决问题


添加锚类
添加数据属性
使全局函数滚动到某一点
比如说

<div id="button-name"></div>

现在通常的问题是，它的兼容性如何，我自己在IE9中测试过这个，它是有效的

这个答案与其说是修复，不如说是拆卸，但我希望这对我有所帮助
现在我明白了

问题是，固定资产净值不再是文档流的一部分。
因此，它不会保留高度。或者换句话说，其他元素不再知道它在那里。就像
display一样：无


您需要找到一种方法，将元素向下推固定导航的高度，但前提是导航是固定的

有几种方法可以做到这一点，但这取决于布局。
想到的第一种方法是应用
填充顶部：？px
；对于#产品导航，在将fixed应用于导航后，通过JS

编辑：
现在我明白了

问题是，固定资产净值不再是文档流的一部分。
因此，它不会保留高度。或者换句话说，其他元素不再知道它在那里。就像
display一样：无


您需要找到一种方法，将元素向下推固定导航的高度，但前提是导航是固定的

有几种方法可以做到这一点，但这取决于布局。
想到的第一种方法是应用
填充顶部：？px
；对于#产品导航，在将fixed应用于导航后，通过JS

编辑：
购买链接将弹出。您是否可以刷新并单击“概述”链接两次，然后查看操作。对不起，如果我之前的描述不是很清楚。你的意思是在第一次点击时向下滚动到该部分，在第二次点击时向上滚动一点吗？那些购买链接将是一个弹出窗口。您是否可以刷新并单击“概述”链接两次，然后查看操作。对不起，如果我之前的描述不是很清楚。你说的动作是指第一次点击时向下滚动到部分，第二次点击时向上滚动一点吗？我不清楚问题是什么：“什么时候点击链接菜单”哪一个？“不转到目标div”除了buy之外，它是这样做的，但没有用于它的部分。@键入Style，您可以单击“概述”链接，然后再次单击。那里发生了一些事情。谢谢。我贴了一个详细描述问题的答案。这就是问题所在吗？我不清楚问题是什么：“什么时候点击链接菜单”哪一个？“不转到目标div”除了buy之外，它是这样做的，但没有用于它的部分。@键入Style，您可以单击“概述”链接，然后再次单击。那里发生了一些事情。谢谢。我贴了一个详细描述问题的答案。这就是问题所在吗？嗨。你能帮我在JSFIDLE中复制这些技巧吗？我添加了一个JSFIDLE链接。它并不完美，但它做到了我说过的我会尝试的。你能帮我在JSFIDLE中复制这些技巧吗？我添加了一个JSFIDLE链接。它并不完美，但它做到了我说过的我会尝试的。你能帮我在JSFIDLE中复制这些技巧吗？嗨。您能帮助在JSFIDLE中重现这些提示吗？
$(".scrollAnchor").click(function(e){
    e.preventDefault();
    anchorDestination = $(this).data("anchor-dest");
    smoothScrollTo(anchorDestination);
});

function smoothScrollTo(element)
{
    $("html, body").stop().animate({
        scrollTop: $(element).offset().top
    }, 1000);
}