jQuery 緩動庫 - 未捕獲的錯誤：語法錯誤，無法識別的表達式

Question

我正在嘗試在我的單頁應用程序中使用http://gsgd.co.uk/sandbox/jquery/easing庫以平滑滾動效果導航到頁面的不同部分。

當我使用以下 html 標記時：

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link page-scroll" href="#home">HOME <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" href="#page1">PAGE 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" href="#page2">PAGE 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" href="#page3">PAGE 3</a>
    </li>
</ul>

連同這個 javascript：

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

這完全符合預期。 但是，我的導航與不在單個頁面上的其他頁面（例如聯系我們）共享，所以我像這樣更新了我的導航：

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link page-scroll" href="/#home">HOME <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" href="/#page1">PAGE 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" href="/#page2">PAGE 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" href="/#page3">PAGE 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" href="/contact-us">Contact Us</a>
    </li>
</ul>

當我這樣做時； 我開始收到此錯誤：

未捕獲的錯誤：語法錯誤，無法識別的表達式： http://example.com/#page1

我嘗試像這樣更新我的 javascript；

$(function() {
    $(document).on('click', 'a.page-scroll', function(event) {
        $('html, body').stop().animate({
            scrollTop: $($(location).attr('hash')).offset().top
        }, 600, 'easeInOutExpo');
        event.preventDefault();
    });
});

這無濟於事。 然而，奇怪的是； 當我在 chrome 控制台中運行它時：

$($(location).attr('hash')).offset().top

這有效，我看到了浮點值。

知道可能出了什么問題嗎？

Answer 1

我找到了一種方法來解決這個問題：

$(function() {
    $(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        var targetUrl = $anchor.attr('href');
        var hash = targetUrl.split('#')[1];
        var targetDiv = $('#' + hash);
        if (targetDiv && targetDiv.length > 0) {
            event.preventDefault();
            $('html, body').stop().animate({
                scrollTop: targetDiv.offset().top
            }, 600, 'easeInOutExpo');
        }
    });
});

這可能不是正確的方法，但它對我有用。