流畅的滚动功能，包括页面切换

Question

我正在尝试编写一个平滑的滚动函数，如果 href 需要先加载一个新页面然后运行滚动，它可以处理。

我看到了一些将 /page-template.html#anchor 添加到 href 的选项，但是动态站点的主页 url 只是 /#anchor.

所以下面的代码没有将斜杠视为目标 href 的一部分。

const $anchor = $('a')

$anchor.on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault()
      let hash = this.hash

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash
      })
    }
})

Answer 1

有点想出一种方法来实现这一点，但它不是非常漂亮。如有任何改进建议，我们将不胜感激。

// If loading a page with a hash in the URL, scroll to it
if (window.location.hash) {
    setTimeout(function() {
        $('html, body').scrollTop(0)
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top
            }, 1000)
    }, 0)
}

// Get the current url path
const currUrl = window.location.pathname

$anchor.on('click', function(e) {

    // Get the href and a hash into variables
    const href = $(this).attr('href')
    const hash = this.hash

    // If a hash is present
    if (hash) {

        // Check if there is a URl path before the hash
        if (href.charAt(0) !== '#') {

            // Check if this URL path matches the current page's href
            if (currUrl == href.split('#')[0]) {
                e.preventDefault()

                // As they match, just run the scroll within the same page
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function() {
                    window.location.hash = hash
                })
            }

        // There is no URL accompanying the hash, so it's got to be within the same page
        } else {
            e.preventDefault()
            // Run smooth scrolling within the page
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 800, function() {
                window.location.hash = hash
            })
        }
    }
})

流畅的滚动功能，包括页面切换

Smooth scrolling function including page change

javascript

jquery

smooth-scrolling