我的页面上有几个超链接。一个常见问题，用户将阅读时，他们访问我的帮助部分。
使用锚链接，我可以使页面滚动到锚，并引导用户到那里。
有没有办法使滚动流畅?
但请注意，他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?
当前回答
$(function() {
$('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
}, 1000);
return false;
}
}
});
});
官员: http://css-tricks.com/snippets/jquery/smooth-scrolling/
其他回答
只有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等)都支持此功能。
要详细了解，请阅读这篇文章
这里已经有很多很好的答案——但是他们都忽略了一个事实，即空锚必须被排除在外。否则，只要单击空锚，这些脚本就会生成JavaScript错误。
在我看来，正确答案是这样的:
$('a[href*=\\#]:not([href$=\\#])').click(function() {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
以下是我为多个链接和锚点实现的解决方案，用于平滑滚动:
http://www.adriantomic.se/development/jquery-localscroll-tutorial/ 如果你在导航div中设置了导航链接，并声明了这样的结构:
<a href = "#destinationA">
和你相应的锚标签目的地如下:
<a id = "destinationA">
然后把这个加载到文档的头部:
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
// Scroll the whole document
$('#menuBox').localScroll({
target:'#content'
});
});
</script>
感谢@Adriantomic
$(function() {
$('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
}, 1000);
return false;
}
}
});
});
官员: http://css-tricks.com/snippets/jquery/smooth-scrolling/
我对"/xxxxx#asdf"和"#asdf" href锚都这样做了
$("a[href*=#]").on('click', function(event){
var href = $(this).attr("href");
if ( /(#.*)/.test(href) ){
var hash = href.match(/(#.*)/)[0];
var path = href.match(/([^#]*)/)[0];
if (window.location.pathname == path || path.length == 0){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
window.location.hash = hash;
}
}
});
