Need help getting jQuery ScrollTo plugin to run

Question

So I've been trying to get Ariel Flesher's jQuery ScrollTo plugin work, but had not luck. I've checked the other post regarding the plugin and it didn't help. So I've created my own post.

HTML:

<header>
    <nav role="navigation">
        <ul class="nav">
            <li>a href="/" title="">Box</a></li>
            <li>a href="/" title="">Table</a></li>
            <li>a href="/" title="">Chair</a></li>
        </ul>
    </nav>
</header>
<div id="main">
    <div id="box"></div>
    <div id="table"></div>
    <div id="chair"></div>
</div>

JS:

$(document).ready(function(){
    $('.nav').scrollTo('#chair');
});

So I need to be able to click on Chair and it slides the Chair section up and so forth. I don't know why, but it just doesn't seem to work. Please any help would be great. Thank you in advance.

Answer 1

Do something like this:

JS:

$(document).ready(function(){
  $('.nav a').bind('click', function() {
    // Get href value from clicked link: "#chair", "#box"...
    var target = $(this).attr('href');

    // Scroll to it
    $.scrollTo($(target));
  });
});

HTML:

<header>
    <nav role="navigation">
        <ul class="nav">
            <li><a href="#box" title="">Box</a></li>
            <li><a href="#table" title="">Table</a></li>
            <li><a href="#chair" title="">Chair</a></li>
        </ul>
    </nav>
</header>
<div id="main">
    <div id="box"></div>
    <div id="table"></div>
    <div id="chair"></div>
</div>

Answer 2

You should use an anchor tag:

<a id="chair" />