Question

我想在我的网站上制作一些按钮，在点击时将用户滚动到网站上。例如，当您点击网站的4个按钮时，我看到了这个网站https://www.slugterra.com/，它会非常顺利地滚动您。现在我使用此代码浏览我的网站。

    <a href="#Center">Go to Center</a>

Answer 1

我使用以下代码在我的页面中实现平滑滚动：

var $root = $('html, body');
$('.smothScroll').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

请注意，使用此代码，您需要将类.smoothScroll添加到元素才能工作。

如果您想在不添加额外类的情况下使用所有链接，可以将jQuery选择器更改为a，但这可能会对其他元素产生不良影响。

您链接到的页面除了平滑滚动外还有另一个动画。如果您分析代码，则可以看到有一个绝对定位的容器，该容器随top和left属性移动。通过听取滚动事件并使用容器的scrollTop和top属性设置与实际left参数的等效性，可以轻松实现这一点。

使按钮顺利滚动您的网站

1 个答案: