jQuery scroll to link element

I'm trying to implement some jQuery to scroll to a link which has a class called "selected-node" on page load, but I haven't had any luck getting it to work. Here is what my code cur开发者_运维知识库rently looks like:

$(document).ready(function () {
    $('a.selected-node').scrollTo();
});

I'm not a jQuery expert, so any insight into what I'm doing wrong?

---

Making the assumption you use this plugin scrollTo plugin page

Given that, you need to change instruction to say what amount to scroll:

 $.scrollTo($('a.selected-node') );//scroll to target

If you need help with using plug-in's on a page, simply add a link to that plugin (where you put it) on your page BELOW where you put your link to the jQuery library.

---

I think you're using code which is intended for a plugin. Did you properly add the plugin code to the page?

Is this where you found the code? http://flesler.blogspot.com/2007/10/jqueryscrollto.html

---

/*
    Anchor Slider by Cedric Dugas   
    Http://www.position-absolute.com 
*/
var locationHref = window.location.href,
    elementClick = $(this).children('a').attr("href"),
    destination = $(elementClick).offset().top;

$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100, function() {
    window.location.hash = elementClick
});

Should work. I use it on my page http://jasonrb.com

---

if you're using the jQuery scrollTo plugin, then try:

$(body).scrollTo( $('a.selected-node'), 1000 )

---

There's a jQuery plugin exactly for your needs

I've written a jQuery plugin that animates scrolling to an out of view element.

You can simply use it similar to what you wanted to do in the first place:

$(document).ready(function () {
    $('a.selected-node').scrollintoview();
});

How does this plugin differ from scrollTo plugin?

The difference between my plugin and scrollTo plugin is that in case of my plugin you don't have to provide scrollable element (which you have to provide with .scrollTo() plugin). You only provide the element you want in view and then call scrollintoview() on it. Plugin will automatically find the closest scrollable ancestor and scroll it of element is not already in view. It will do this with animation (you can control its speed) and in the end it can also call your complete function.

If your element is below the view it will be scrolled to the bottom, if it's above it will be scrolled to the top. The nearest place possible. By highlighting it afterwards it makes it easy to give your users a point of focus when the page/element scrolls.

Check my blog post, where you will find the latest version of the .scrollintoview() plugin with all details you may be interested.

Should you use animated scrolling at all?

Depending on the page process it may not be feasible for your to use animated scrolling at all. Maybe you should rather just jump to a particular element. In that case your code will simplify big time because you can use built-in functionality:

$(document).ready(function () {
    $('a.selected-node').get(0).scrollIntoView();
});

This will just jump to your link. And this DOM function is supported in all browsers and has been for a long time.