Update April 2018: There's now a native way to do this :
(2018年4月更新:现在有一种本地方法可以做到这一点 :)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
This is currently only supported in the most bleeding edge browsers.
(当前仅在最先进的浏览器中支持此功能。)
For older browser support, you can use this jQuery technique:
(对于较旧的浏览器支持,可以使用以下jQuery技术:)
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
And here's the fiddle: http://jsfiddle.net/9SDLw/
(这是小提琴: http : //jsfiddle.net/9SDLw/)
If your target element does not have an ID, and you're linking to it by its name
, use this:
(如果您的目标元素没有ID,并且要通过其name
链接到它,请使用以下命令:)
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
For increased performance, you should cache that $('html, body')
selector, so that it doesn't run every single time an anchor is clicked:
(为了提高性能,您应该缓存该$('html, body')
选择器,以便它不会在每次单击定位器时都运行:)
var $root = $('html, body');
$('a[href^="#"]').click(function () {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
If you want the URL to be updated, do it within the animate
callback:
(如果要更新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;
});