Using jQuery.ScrollTo to scroll down when a link is clicked

Question

I have a link on top of my page Categories when this is clicked, the page jumps to the bottom where the target div is located

I am trying to use jQuery.ScrollTo but its not working. I am not sure how to debug.

 $(document).ready(function()
{


    // Scroll the content inside the #scroll-container div
    $('.categories_link').scrollTo({
       target:'#categories'
    });

});

UPDATE: Found this http://jsfiddle.net/VPzxG/ so now trying to modify it. Any help would be appreciated.

Answer 1

You don't need JS at all. Just use

<a class="categories_link" href="#categories">Click me!</a>

DEMO : http://jsfiddle.net/ezCFC/

Answer 2

First, I recommend changing the HTML to the following:

<div id="sidebar">
    <ul>
        <li><a href="#about">auck</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#resume">Resume</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

then just use .animate() and .offset() :

$(function(){
    $("#sidebar > ul > li > a").click(function(e) { 
        e.preventDefault(); 
        var id = $(this).attr("href");
        $('body').animate({
            scrollTop: $(id).offset().top
        }, 1000);     
    });
});

DEMO: http://jsfiddle.net/dirtyd77/VPzxG/1465/