jQuery easing library - Uncaught Error: синтаксическая ошибка, нераспознанное выражение

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>

Когда я это сделал;Я начал получать эту ошибку:

Uncaught Error: Синтаксическая ошибка, нераспознанное выражение: 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');
        }
    });
});

это может быть неправильный подход, но он работает для меня.