我的页面上有几个超链接。一个常见问题，用户将阅读时，他们访问我的帮助部分。
使用锚链接，我可以使页面滚动到锚，并引导用户到那里。
有没有办法使滚动流畅?
但请注意，他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
当前回答
不需要任何js只是使用滚动行为:平滑的html标签就是这样
html{
scroll-behavior: smooth;
}
其他回答
经过测试和验证的代码
<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
jQuery('html, body').animate({
scrollTop: jQuery(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
本机支持在哈希id滚动上平滑滚动。
html {
scroll-behavior: smooth;
}
大家可以看看:https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
这里已经有很多很好的答案——但是他们都忽略了一个事实，即空锚必须被排除在外。否则，只要单击空锚，这些脚本就会生成JavaScript错误。
在我看来，正确答案是这样的:
$('a[href*=\\#]:not([href$=\\#])').click(function() {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
只有CSS
html {
scroll-behavior: smooth;
}
你只需要加上这个。现在你的内部链接滚动行为将是流畅的像一个流。
程序化:一些额外的和高级的东西
// Scroll to specific values
// window.scrollTo or window.scroll
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 250, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.getElementById('el').scrollIntoView({
behavior: 'smooth'
})
注意:所有最新的浏览器(Opera, Chrome, Firefox等)都支持此功能。
要详细了解，请阅读这篇文章
我建议你编写这样的泛型代码:
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;});
您可以在这里看到一篇非常好的文章:jquery- effect -smooth-scroll- pollution -fluide
