带有锚点的链接的平滑滚动
带有锚点的链接的平滑滚动
提问于 2018-06-06 06:34:17
我正在寻找如何添加平滑滚动的链接，如example.com/subpage#锚。
我试着用这段代码
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});但它不适用于example.com/subpage#锚点
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-06 06:55:10
实际上，您的逻辑看起来运行得很好，没有任何修改。
$(document).on('click', 'a[href^="#"]', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});#container menu {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
background-color: rgb(128, 128, 128);
}
menu li {
display: inline-block;
min-width: 32.75%;
text-align: center;
background-color: rgb(152, 152, 152);
}
#home,
#aboutUs,
#contact {
display: block;
min-height: 600px;
}
#home {
background-color: red;
margin-top: 19px;
}
#aboutUs {
background-color: green;
}
#contact {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<menu>
<li><a href="#home">Home</a></li>
<li><a href="#aboutUs">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</menu>
<div id="home"></div>
<div id="aboutUs"></div>
<div id="contact"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50709873
复制相关文章
相似问题