jQuery scrollTo() "unrecognized expression"

Question

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.

[.scrollTo()](https://github.com/flesler/jquery.scrollTo) is a plugin. You have to include it in your project. — Vucko, Dec 21 '14 at 23:19
Indeed, I stumbled upon [this](http://lions-mark.com/jquery/scrollTo/) manual page and mistook it for an actual jQuery reference page, while in fact the function scrollTo() is part of [this](http://demos.flesler.com/jquery/scrollTo/) plug-in. Thanks for pointing that out. — slagjoeyoco, Dec 21 '14 at 23:52

score 2 · Accepted Answer · answered Dec 21 '14 at 23:26

2

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.

answered Dec 21 '14 at 23:26

p e p

6,337
2
20
32

Ah, of course, that makes sense - I somehow presumed using .href would also give me just the value of that attribute. One should always use functions like $.attr() for this sort of thing - stupid me. Thanks for the help ! – slagjoeyoco Dec 21 '14 at 23:55

score 2 · Answer 2 · edited May 23 '17 at 11:44

2

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);
    }
});

edited May 23 '17 at 11:44

Community

1
1

answered Dec 21 '14 at 23:34

Delorian

340
1
3
13

Thank you - I realized, however, that I confused jQuery's scrollTop() function with scrollTo(), which is part of a dedicated jQuery plug-in. That and me not using the attr() function to access the value of the anchor's href-attribute caused my code to fail. – slagjoeyoco Dec 21 '14 at 23:57

score 1 · Answer 3 · answered Dec 21 '14 at 23:24

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>

jQuery scrollTo() "unrecognized expression"

3 Answers3