scrollTo: Getting button images to scrollTo divs

I've not found an answer really specific to my case, which I would imagine is common. I'm looking to add the scrollTo effect to my webpage using jquery (or javascript). I still don't know what is the easiest way granted I've not gotten anything to work. :(

I have a single vertical page. Navigation is on the bottom of each div wrapper. I'd like my button areas to scroll to the divs. As of now, I've styled the buttons to link to the Divs. That's perfect, except, I need to add the animation.

You can have a look at my test page here: my site

I've tried scrollTo, but each of my buttons links to a specific div. Not sure how to modify the plugin to work for me.

I think the next best solution is inserting javascript that animates all links in a window? Definitely don't know where to find that code or how to modify it for my case.

Thanks in advance eve开发者_运维问答ryone, and I look forward to a solution from what seems to be a very vibrant community.

---

Try something like this...

working example: http://jsfiddle.net/BTncy/

$(document).ready(function(){
  $('a').click(function(){
    var ele_href= $(this).attr('href');
    $('html,body').animate({scrollTop: $('#' + ele_href).offset().top},'slow');
    return false;
  });
});

---

(Note, from your example you have the javascript in the title attribute, not an onclick, not sure if that's intended)

This doesn't use a plugin, but you could do something as simple as the following using jQuery:

function scrollTo (element) {
    var target = $(element).offset();
    $('body').animate({scrollTop: target.top}, 'slow');
}

This allows you to just specify the selector to what you want to scroll to, so it could be as simple as:

<div id="more">
    <a onclick="scrollTo('#intro_2_container'); return false;" href="#into_2_container">
        <img src="images/more.png" border="0" />
    </a>
</div>

In my quick testing that seemed to work. (After I fixed the typo of the target element in the scrollTo call)