如何使用 jQuery 动画和同时更新 URL 的平滑页面滚动？

Question

我正在使用带有自定义动画的 jQuery 动画功能来触发我网站上的平滑页面滚动。我在代码末尾使用 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();
    });
});

Answer 1

我把你的 html/javascript 黑进了一页。长话短说 - 使用插件 https://github.com/mathiasbynens/jquery-smooth-scrolling/blob/master/jquery.smoothscroll.js（这就是 javascript 的来源）

虽然人家说要用'smooth-scroll' https://www.w3schools.com/cssref/pr_scroll-behavior.asp 但我无法让它工作

说到这里好像就结束了

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

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

<!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>

如何使用 jQuery 动画和同时更新 URL 的平滑页面滚动？

How can you use smooth page scrolling with jQuery animate and update the URL at same time?

javascript

jquery

scroll

jquery-animate