由于我取得了一些进展,我正在编辑这篇文章。
我的主菜单水平位于页面顶部,带有 position:fixed
。我想做到这一点,以便当单击链接时,页面可以平滑地向下滚动到相应的目标。由于我的粘性标题,所述目标需要以距视口(viewport)顶部的偏移量显示。
我的 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 显示在视口(viewport)顶部下方 200 像素处,并且不会被我的粘性标题覆盖。
<li><a href="different-page.html#link3">Link 3</a></li>
从 index.html 到 <h1 id="link3">Heading 3</h1>
部分的链接上different-page.html
这也有效,除了 -200 的偏移量被忽略之外。这意味着该部分顶部与视口(viewport)顶部对齐,因此它被粘性导航覆盖。
我猜进入新页面会以某种方式扰乱我的js?我希望它始终注意偏移量,以便当我链接到另一个页面上的特定部分时,该部分加载距视口(viewport)顶部 200px 的位置(因此位于我的标题下方,而不是下方)。
希望我解释得正确。
最佳答案
我更改了代码一些 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>
关于javascript - 如何实现点击 anchor 链接时平滑滚动到不同页面的部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55791646/