Question

http://jsbin.com/ifutav/2/edit

I want to use http://balupton.github.com/jquery-scrollto/demo/ to automatically scroll relative navigation links. With the code below this is the error I’m getting: Uncaught Error: Syntax error, unrecognized expression: #/article/ which is obviously caused by the slashes (which are a required namespace from a ajax plugin), when I remove them the error goes away but still does not work: http: //jsbin.com/ifutav/3/edit but the e.preventDefault() does. So obviously two errors are happening here:

1. jQuery doesn’t like the href value
2. scrollTo isn’t working correctly

HTML: links

<nav id="nav">
  <ul>
    <li><a href="#/item-1/">Item 1</a></li>
    <li><a href="#/item-2/">Item 2</a></li>
    <li><a href="#/item-3/">Item 3</a></li>
    <li><a href="#/item-4/">Item 4</a></li>
  </ul>
</nav>

HTML: elements

<section id="/item-1/"></section>
<section id="/item-2/"></section>
<section id="/item-3/"></section>
<section id="/item-4/"></section>

Javascript

$('nav ul li a[href^="#"]').each(function() {

  // store values so it doesn't have to execute onclick
  var $this = $(this),
      value = $this.attr('href'),
      element = $(value);

  $this.click(function(e) {

    // prevent default scrolling
    e.preventDefault();

    // scrollTo element
    element.scrollTo();
  });
});

I don’t know the reason behind either of these areas but I assume they are some kind of type error? idk…

Thanks ahead of time.

Answer 1

Two things: 1) Remove the forward slashes from your href and id’s. 2) If you are using http://balupton.github.com/jquery-scrollto/demo/ then the method ScrollTo needs a capital S: element.ScrollTo();

See working example: http://jsfiddle.net/dBh3W/