单击锚链接时如何实现平滑滚动到不同页面上的部分？
Posted
技术标签:
【中文标题】单击锚链接时如何实现平滑滚动到不同页面上的部分？【英文标题】：How to implement smooth scrolling to section on different page when an anchor link is clicked? 【发布时间】：2019-04-22 08:47:29 【问题描述】：由于我取得了一些进展，我正在编辑这篇文章。
我的主菜单水平位于页面顶部，带有position:fixed。我想做到这一点，当点击链接时，页面会平滑地向下滚动到相应的目标。由于我的粘性标题，所述目标需要显示与视口顶部的偏移量。
我的 html/CSS：
<style>
#main_menu
position: fixed;
</style>
<body>
<nav id="main_menu">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="different-page.html#link3">Link 3</a></li>
</ul>
</nav>
index.html 的主要部分：
<main>
<h1 id="link1">Heading 1</h1>
<!-- some content -->
<h1 id="link2">Heading 2</h1>
<!-- some content -->
</main>
different-page.html的主要部分：
<main>
<!-- some content -->
<!-- some content -->
<!-- some content -->
<!-- some content -->
<h1 id="link3">Heading 3</h1>
<!-- some content -->
</main>
编辑： 我现在使用它在部分之间平滑滚动：
$('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 - 220
, 1000);
return false;
);
它适用于在一页上的各个部分之间平滑滚动。但是，如果我链接到不同页面上的某个部分，它就无法正常工作。
示例：<li><a href="#link1">Link 1</a></li> 到 <h1 id="link1">Heading 1</h1> 有效。单击时，页面向下滚动到标题 1，然后标题 1 显示在视口顶部下方 200 像素处，并且不会被我的粘性标题覆盖。<li><a href="different-page.html#link3">Link 3</a></li> 从 index.html 链接到 @ 上的 <h1 id="link3">Heading 3</h1> 部分987654330@ 这也有效，除了 -200 的偏移量被忽略。这意味着部分顶部与视口顶部对齐，因此它会被粘性导航覆盖。
我猜想进入一个新页面会以某种方式与我的 js 混淆？我希望它始终注意偏移量，以便当我链接到另一个页面上的特定部分时，此部分加载距离视口顶部 200 像素（因此在我的标题下方，而不是在下方）。
希望我解释得对。
【问题讨论】：
【参考方案1】：我更改了代码一些 CSS 更改-
<style>
html
scroll-behavior: smooth;
#main_menu
position: fixed;
</style>
<body>
<nav id="main_menu">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
</ul>
</nav>
<main style="overflow-y:scroll;height:58vh">
<h1 id="link1">Heading 1</h1>
<!-- some content -->
<h1 id="link2">Heading 2</h1>
<!-- some content -->
<h1 id="link3">Heading 3</h1>
<!-- some content -->
</main>
<script>
// ???
</script>
</body>
【讨论】：
谢谢，这很有效，尽管它在main 部分添加了一个滚动条。 I also figured that scroll-behavior: smooth; 没有很好的跨浏览器支持。所以我认为js解决方案是最好的。我已经更深入地寻找并更新了我的原始帖子。以上是关于单击锚链接时如何实现平滑滚动到不同页面上的部分？的主要内容，如果未能解决你的问题，请参考以下文章