jQuery easing library - Uncaught Error: Syntax error, unrecognized expression

Question

I am trying to use http://gsgd.co.uk/sandbox/jquery/easing library in my single page app to navigate to different section of my page with smooth scrolling effect.

When I use the following html markup:

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

along with this 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();
    });
});

This works exactly as expected. However, my nav is shared with other page (eg contact us), which is not on the single page, so I updated my nav like this:

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

When I did this; I started to get this error:

Uncaught Error: Syntax error, unrecognized expression: http://example.com/#page1

I tried updating my javascript like this;

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

This does not help. However, what's strange is; when I run this in the chrome console:

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

This works and I am seeing float value.

Any idea what might be wrong?

Answer 1

I found a way to fix this like so:

$(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');
        }
    });
});

this might not be the right approach, but it's working for me.