我的页面上有几个超链接。用户在访问我的帮助部分时将阅读的常见问题解答。
使用锚链接,我可以使页面滚动到锚点并引导用户到那里。
有没有办法使滚动平滑?
但请注意,他使用的是自定义 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,请使用以下命令:
name
$('a[href^="#"]').click(function () { $('html, body').animate({ scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top }, 500); return false; });
为了提高性能,您应该缓存该$('html, body')选择器,以便它不会在 每次 单击锚点时运行:
$('html, body')
var $root = $('html, body'); $('a[href^="#"]').click(function () { $root.animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; });
如果要更新 URL,请在animate回调中执行:
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; });