CODEWITHSUNDEEP
javascriptjquerysyntax-erroranchorscrollto
slagjoeyoco
slagjoeyoco

Reputation: 321

jQuery scrollTo() "unrecognized expression"

I tried to use the methode explained in this answer in order to create a simple 3-point-menu that would let the user scroll to the respective sections.

Ended up with this code:

HTML

<body>
    <nav id="nav">
        <ul>
            <li>
                <a class="navLink" href="#home">HOME</a>
            </li>
            <li>
                <a class="navLink" href="#info">INFO</a>
            </li>
            <li>
                <a class="navLink" href="#pics">PICS</a>
            </li>
        </ul>   
    </nav>

    <section id="home">
        <!-- stuff -->
    </section>

    <section id="info">
        <!-- stuff -->
    </section>

    <section id="pics">
        <!-- stuff -->
    </section>
</body>

JS

$('a.navLink').on('click', function(event) {
    event.preventDefault();
    var target = $(this.href);
    if( target.length ) {
        $("html, body").scrollTo(target, { duration: 1000, easing: "linear" });
    }
});

Upon clicking any of the three links I end up with:

Uncaught Error: Syntax error, unrecognized expression:
http://localhost/meckerHP/#whatevervalueinhref

Even tried not using the href attribute at all by using an id for each link instead, which does eliminate the error message but leaves me with dead links.

I can't see any reason whatsoever why the method in the above-linked answer shouldn't be working, so any help is really appreciated.

Upvotes: 1

Views: 2336

Answers (3)

Delorian
Delorian

Reputation: 340

Here's a Fiddle that should help you: http://jsfiddle.net/Delorian/s0d34qhk/

I extracted out the id by finding the # in the link and referencing that.

I also changed the animation to use the function in the answer you referenced: https://stackoverflow.com/a/6677069/3264286

$('a.navLink').on('click', function(event) {
    event.preventDefault();
    var href = this.href;
    var target = $(href.substring(href.lastIndexOf('#')));
    if( target.length ) {
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 1000);
    }
});

Upvotes: 2

p e p
p e p

Reputation: 6674

You can fix this by changing the line below from:

var target = $(this.href);

to:

var target = $($(this).attr('href'));

The problem with your initial line of code is that this.href will return the full URL of your anchor, not just the literal value in your href in the HTML. So you can't use that as a jQuery selector because of that. If you instead use $($(this).attr('href'));, that basically evaluates to $("#theHref"); which is what you expected.

Upvotes: 2

Patrick Evans
Patrick Evans

Reputation: 42736

Accessing the href property from the DOM anchor element will give back a full url instead of what is just in the href attribute on the tag. Because of this you are passing the jQuery method a url which is an invalid expression for selectors.

You can use jQuery's attr method to get the actual attribute text

var target = $(this).attr("href");

DEMO

jQuery("a.navLink").each(function(){
  var property = this.href;
  var attr = jQuery(this).attr("href");
  var prop = jQuery(this).prop("href");
  
  jQuery("#log").append('<div>Property Value: '+property+'</div>');
  jQuery("#log").append('<div>Attribute Value: '+attr+'</div>');
  jQuery("#log").append('<div>Prop Value: '+prop+'</div>');
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>
<ul>
  <li>
    <a class="navLink" href="#home">HOME</a>
  </li>
  <li>
    <a class="navLink" href="#info">INFO</a>
  </li>
  <li>
    <a class="navLink" href="#pics">PICS</a>
  </li>
</ul>

Upvotes: 1

Related Questions