点击锚链接时平滑滚动
我的网页上有几个超链接。 用户在访问我的帮助部分时会阅读的常见问题解答。
使用锚链接，我可以使页面向锚点滚动并引导用户。
有没有办法让滚动顺畅？
但请注意他正在使用自定义JavaScript库。 也许jQuery提供这样的东西烤出来？
2018年4月更新：现在有一种本地方式可以做到这一点：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
目前仅在最流行的浏览器中才支持此功能。
对于较老的浏览器支持，您可以使用这种jQuery技术：
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
这里是小提琴：http://jsfiddle.net/9SDLw/
如果您的目标元素没有ID，并且您的name链接到了它，请使用以下命令：
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
为了提高性能，您应该缓存$('html, body')选择器，以便每次单击锚时都不会运行该选择器：
var $root = $('html, body');
$('a[href^="#"]').click(function () {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
如果您想要更新URL，请在animate回调中执行此操作：
var $root = $('html, body');
$('a[href^="#"]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
正确的语法是：
//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*=# ：
*表示它匹配包含#字符的内容。 因此只匹配锚。 关于这个的含义的更多信息，请看这里 #是CSS选择器中的特殊字符，所以我们必须将其转义。 $('a[href*=#]').click(function(event){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
event.preventDefault();
});
这对我来说非常合适
链接地址: http://www.djcxy.com/p/49639.html