我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
我的页面上有几个超链接。一个常见问题,用户将阅读时,他们访问我的帮助部分。
使用锚链接,我可以使页面滚动到锚,并引导用户到那里。
有没有办法使滚动流畅?
但请注意,他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
当前回答
本机支持在哈希id滚动上平滑滚动。
html {
scroll-behavior: smooth;
}
大家可以看看:https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
其他回答
CSS3的新热点。这比本页列出的所有方法都要简单得多,而且不需要Javascript。只需输入下面的代码到你的css和所有的链接指向你自己的页面内的位置将有一个平滑的滚动动画。
html{scroll-behavior:smooth}
之后,任何指向div的链接都将平滑地滑到这些部分。
<a href="#section">Section1</a>
编辑:对于那些对上面的一个标签感到困惑的人。基本上它是一个可点击的链接。然后你可以在你的网页的某个地方有另一个div标签
<div id="section">content</div>
在这种情况下,a链接将是可点击的,并将转到#section是什么,在这种情况下,它是我们称为section的div。
顺便说一句,我花了好几个小时才让它工作。在一些晦涩的评论区找到了解决方案。它是错误的,不会工作在一些标签。对身体不起作用。当我把它放在CSS文件中的html{}中时,它终于工作了。
要求jquery和动画锚标签与指定的名称而不是id,同时添加哈希到浏览器url。还修复了大多数jquery答案中#符号没有带转义反斜杠前缀的错误。返回按钮,不幸的是,不能正确地导航回以前的哈希链接…
$('a[href*=\\#]').click(function (event)
{
let hashValue = $(this).attr('href');
let name = hashValue.substring(1);
let target = $('[name="' + name + '"]');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
event.preventDefault();
history.pushState(null, null, hashValue);
});
添加:
function () {
window.location.hash = href;
}
是否使垂直偏移量无效
top - 72
Firefox和IE浏览器,但Chrome浏览器没有。基本上,页面平滑地滚动到基于偏移量它应该停止的位置,但然后向下跳转到没有偏移量的页面所在的位置。
它确实将哈希添加到url的末尾,但按下back并不会让你回到顶部,它只是从url中删除哈希,并留下它所在的查看窗口。
这是我使用的完整js:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top - 120
}, 500, function () {
window.location.hash = href;
});
return false;
});
本机支持在哈希id滚动上平滑滚动。
html {
scroll-behavior: smooth;
}
大家可以看看:https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
正确的语法是:
//Smooth scrolling with links
$('a[href^=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
$('html,body').animate({scrollTop:$(location.hash).offset().top}, 500);
});
简化:干
function smoothScrollingTo(target){
$('html,body').animate({scrollTop:$(target).offset().top}, 500);
}
$('a[href^=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
href^=\\#说明:
^表示它匹配包含# char的内容。因此,只匹配锚,以确保它是一个链接到同一页面(感谢Peter Wong的建议)。 \\是因为#在CSS选择器中是一个特殊字符,所以我们必须转义它。