javascript - 单击锚点链接时平滑滚动(Smooth scrolling when clicking an anchor link)

Question

I have a couple of hyperlinks on my page.

(我的页面上有几个超链接。)

A FAQ that users will read when they visit my help section.

(用户访问我的帮助部分时将阅读的常见问题解答。)

Using Anchor links, I can make the page scroll towards the anchor and guide the users there.

(使用锚点链接，我可以使页面滚动到锚点并在那里引导用户。)

Is there a way to make that scrolling smooth?

(有没有办法使滚动平滑？)

But notice that he's using a custom JavaScript library.

(但是请注意，他正在使用自定义JavaScript库。)

Maybe jQuery offers somethings like this baked in?

(也许jQuery提供了类似的功能？)

  ask by Only Bolivian Here translate from so

Answer 1

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;
});