如何使用 jQuery animate 平滑页面滚动并同时更新 URL？答案

【问题标题】：How can you use smooth page scrolling with jQuery animate and update the URL at same time?如何使用 jQuery animate 平滑页面滚动并同时更新 URL？
【发布时间】：2020-04-27 14:30:19
【问题描述】：

我正在使用带有自定义动画的 jQuery animate 函数来触发我网站上的平滑页面滚动。我在代码末尾使用 event.preventDefault() 函数调用，并使用此选项页面滚动，但它不会更新 URL。当我删除此函数调用时，它会更新 URL，但事先页面会闪烁然后滚动。我也尝试过不使用自定义动画，但它的行为仍然相同。有解决办法吗？

$(function () {
    $.extend($.easing,
        {
            easeInOutExpo: function (x, t, b, c, d) {
                t /= d / 2;
                if (t < 1) {
                    return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                }
                t--;
                return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
            }
        }
    );

    $('a.page-scroll').on('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1600, 'easeInOutExpo');
        event.preventDefault();
    });
});

【问题讨论】：

你有一些 html 来匹配你的 javascript 吗？
嗨，理查德，感谢您抽出宝贵时间。你特别需要什么？我的 HTML 文件中没有直接为这个函数指定任何内容。
只是一些您正在使用此代码的示例 html。 - 所以我可以尝试查看并复制它，然后可能会找到解决方案
只需克隆这个 repo：github.com/z0le12/stack-overflow

标签： javascript jquery scroll jquery-animate

【解决方案1】：

我已将您的 html/javascript 破解为一页。长话短说 - 使用插件 https://github.com/mathiasbynens/jquery-smooth-scrolling/blob/master/jquery.smoothscroll.js（这就是 javascript 的来源）

虽然人们说要使用“平滑滚动” https://www.w3schools.com/cssref/pr_scroll-behavior.asp 但我无法让它工作

也就是说这似乎是结束线

$scrollElement.stop().animate({ 'scrollTop': $hash.offset().top }, speed, function() {
                        location.hash = hash;
                    });

所以基本上一旦动画完成更新链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Smooth scroll</title>
    <style>
        #sneaker {
  margin-top: 1500px; 
  width: 100%;
}
    </style>
</head>
<body>
    <div id="main-container">
      <a class="page-scroll" href="#sneaker">Take you to the sneaker</a>
      <img id="sneaker" src="adidas-superstar-2-white-black.jpg" alt="adidas superstar sneaker">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script >
    /*! http://mths.be/smoothscroll v1.5.2 by @mathias */
;(function(document, $) {

    var $scrollElement = (function() {
        // Find out what to scroll (html or body)
            var $html = $(document.documentElement),
                $body = $(document.body),
                bodyScrollTop;
            if ($html.scrollTop()) {
                return $html;
            } else {
                bodyScrollTop = $body.scrollTop();
                // If scrolling the body doesn’t do anything
                if ($body.scrollTop(bodyScrollTop + 1).scrollTop() == bodyScrollTop) {
                    return $html;
                } else {
                    // We actually scrolled, so undo it
                    return $body.scrollTop(bodyScrollTop);
                }
            }
        }());

    $.fn.smoothScroll = function(speed) {
        speed = ~~speed || 400;
        // Look for links to anchors (on any page)
        return this.find('a[href*="#"]').click(function(event) {
            var hash = this.hash,
                $hash = $(hash); // The in-document element the link points to
            // If it’s a link to an anchor in the same document
            if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
                // If the anchor actually exists…
                if ($hash.length) {
                    // …don’t jump to the link right away…
                    event.preventDefault();
                    // …and smoothly scroll to it
                    $scrollElement.stop().animate({ 'scrollTop': $hash.offset().top }, speed, function() {
                        location.hash = hash;
                    });
                }
            }
        }).end();
    };

}(document, jQuery));
    </script>
    <script>

        $('html').smoothScroll();

    </script>
</body>
</html>

【讨论】：

谢谢@Richard。这是急需的解决方案。我使用以下 CSS 规则 html { scroll-behaviour: smooth: } 修复了这个问题，您的解决方案要好得多，因为使用它我可以设置滚动页面的速度。再次感谢您。
不用担心，如果有帮助，请将问题标记为已回答。