我有一个带有粘性 header 的网页，我正在尝试实现平滑滚动以锚定标签以进行导航。当我点击我想去的部分的导航链接时 scrollTop: href.offset().top - 100似乎无法正常工作。如果我在网页导航到该部分后再次单击该链接，我可以看到页面滚动，但随后又弹回到顶部。知道发生了什么事吗？我正在使用 Microsoft Edge(是的，我知道......)。
HTML
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
<nav><a href="#section1">Section #1</a></nav>
<main>
<!-- INSERT A BUNCH OF <BR> TAGS -->
<h2 id="section1">section1</h2>
<!-- INSERT A BUNCH OF <BR> TAGS -->
</main>
</body>
</html>
CSS
nav {
position:fixed;
padding:4px;
border:2px solid #000;
width:100%;
line-height:2.25em;
background-color:yellow;
}
h2 {
padding:4px;
border:1px solid #000;
width:100%;
line-height:100px;
background-color:red;
}
jQuery
$(document).ready(function() {
$('a[href*="#"]').click(function(event) {
var href = $(this.hash);
if (href.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: href.offset().top - 100
}, 750, function() {
location.hash = href.attr('id');
});
}
});
});
编辑:
我知道设置 <div>元素到 display:fixed将其从页面流中删除，我认为这是导致问题的原因。有解决办法吗？
最佳答案
编辑:
Edge 和 Firefox 并未配合修改 hashchange 行为的初始方法，因此此编辑只是删除了 window.location.hash 步骤以防止动画后跳转.但是，这并不理想，因为它阻止了默认的哈希位置行为。
$(document).ready(function() {
$('a[href*="#"]').on('click', (event) => {
const hash = event.currentTarget.hash;
if (hash) {
event.preventDefault();
$('html, body').animate({scrollTop: $(hash).offset().top - 100}, 750);
}
});
});nav {
position: fixed;
padding: 4px;
border: 2px solid #000;
width: 100%;
line-height: 2.25em;
background-color: yellow;
}
h2 {
padding: 4px;
border: 1px solid #000;
width: 100%;
line-height: 100px;
background-color: red;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body id="home">
<!-- Navigation -->
<nav><a href="#section1">Section #1</a></nav>
<!-- Main Content -->
<main>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="section1">section1</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</main>
</body>
</html>原创:
我认为 location.hash 会导致滚动在 scrollTop 动画完成后跳到顶部。您可以修改 hashchange 事件以在 anchor 上方相同距离处停止滚动以消除跳跃。
$(document).ready(function() {
$(window).on('hashchange', function() {
window.scrollTo(window.scrollX, window.scrollY - 100);
});
$('a[href*="#"]').on('click', (event) => {
const hash = event.currentTarget.hash;
if (hash) {
event.preventDefault();
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 750, function() {
window.location.hash = hash;
});
}
});
});
关于javascript - JQuery 平滑滚动到带有粘性导航栏的 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52322144/