(11 votes, average: 4.45 out of 5)
Loading ...The slide to jQuery plugin makes it so your web pages slide to the anchor rather than the traditional “page jump” to a specific anchor. I wrote a very light weight plugin which is very easy to install and configure.
*Disclaimer, this plugin has been designed for HTML5 doctypes. I don’t want an earful from you saying how you got yelled at by the w3c validator!
The Plugin
Slide to Example 1!
This example will make all anchor links that contain the leading #hash style linking. Normally, the links would jump to another anchor pairing the #name to name attribute of the target anchor. My script takes this single page linking and adds a very neat web 2.0 style sliding scroll effect.
$(document).ready(function(){ $('a[href^=#]').slideto({ speed : 2500 }); }); |
Slide to Example 2!
This example demonstrates how you can use jQuery selectors and simply add a target to the selected elements by the target option.
$(document).ready(function(){ $('.slideto').slideto({ target : '#test', speed : 'slow' }); }); |
The target option changes how fast the page slides. You can user ‘fast’, ‘slow’, ‘medium’, or microseconds.
Slide Back to Top
I added a target element to the top of the document.
$(document).ready(function(){ $('a[name=slideto]').slideto({ target : '#top', speed : 2500 }); }); |
It’s very easy to invoke. Feel free to leave feedback.
Download “jQuery Slide To” Plugin
Download jquery.slideto.js Version: 1.1 Size: (1.4 kB)
Loading ...
Jesse Price is a web applications developer currently located in Sarasota, Florida. He enjoys the daily challenges of creating usable web applications that consists of custom content management, customer relationship management, and dynamically driven database systems.
the idea is great, but the example 1 flickers before scrolling
Working on it. Will have fixes up shortly.
*Update, it is now fixed. Doesn’t flicker anymore.
Thank you, thank you, thank you!!!! This is so cool! Having a lot of fun playing with the code and watching it work. I’m redesigning my site and was looking for something like this.
Hi
Thank you for this very useful plugin
I would like to call the slideto function from a document in an iframe (a button or a link) ..
But not the content of the iframe should slide but the content of the window (top target)
Is this possible – if so, could you kindly give me a clue – I am a beginner of jQuery
best regards
Hans
Hi Jesse,
Thanks for your effort. Its looking great on your website(the demo)
However it doesn’t seem to work, no matter how much i fondled it.
How do you ‘install’ this thing? And how come the links are voids in your demo?
This looks like what i’m looking for…
The only question i have is, if it’s possible to slideto (let’s say) 50px from the anchor ?
greetings,
Santoir
Thanks for the code – This is exactly what I needed: Albeit I also need the adjustment that Santoir has requested.. Do you have any thoughts on shifting the anchor point – In my situation due to a position-fixed header ‘hiding’ the anchored content when you get there?
When I have time I will add another option for the pixel spacing from the top or bottom. I’ve been extremely busy. Hopefully I can add this new feature this weekend! Cheers.
Hi Jesse
I’ve followed you example exactly but Firebug is giving me an error: “anchor.offset() is null”
Any ideas?? Looking forward to using this.
Thanks
Ian.
Hi Jesse
Nice little plugin – but I have a quick question: any specific reason you’re relying on ‘name’ rather than ‘id’ to define the anchors/targets? (‘name’ is/has been dropped from the HTML5 spec). This may also be the reason some people may be having trouble with it, as per Maxwell above – I’ve modified the version I’m using to use ‘id’ instead.
Also, this is unrelated, but I’ve added a check in line 22 to make sure url does not equal ‘#’
url!="#"before replacing it withjavascript:void(), since I tend to use ‘#’ for dummy links while developing.cheers
dave
That’s a scenario that I haven’t thought of… Thanks for the input.
Hi again Jesse – sorry, just found another tweak. Line 26 (should have specified this in my last comment) has changed from this:
anchor = $("a[name='"+pieces[1]+"']");to this:
anchor = $("*[id='"+pieces[1]+"']");Basically, it can now target any element with an ‘id’, not just an ‘a’ with a name. This means you can link directly to sections, articles, divs, headings etc (as long as they have an id) without needing to insert extra markup (empty anchor links). I’m not great at js, so I hope this makes sense – it seems to work testing locally, but I’m not sure if there’s any performance issues or any other bugs that might arise from this… what do you think?
Thanks again for the great little plugin. Cheers,
dave
Hi Dave, I made sure it was backwards compatible for the anchor jump with the hash in the url. I know it’s been dropped via the HTML5 specs. It still works and HTML5 is still being standardised so I figured it would be better to keep deprecated syntax that works. I appreciate your input! And yes, I totally agree with you that the id would be much better since it’s unique just like the name attribute. I will have to add that in when I have the time. Just lately I’ve been wired in with a ton a features for my next project.
No worries Jesse. Thanks again for the plugin.
I just added another tweak. I’m using the plugin on a CMS-driven site where I need to initialise all my js in one include. Basically, if slideto is invoked on a page and it can’t find the element it’s been invoked for, it targets all anchors with a ‘#’ in the href attribute. So in my case, on some pages where the target elements aren’t rendered, the slideto plugin was replacing some anchor links (eg
) that I needed with.To address this I replaced line 18:
var elem = (this.length > 0) ? this : 'a';with this:
var elem = this;Now slideto should only modify the links of elements it’s been specifically invoked for (I realise this kinda defeats the ‘set and forget’ flexibility of it, but I only need it to apply to some specific elements).
cheers
dave
Im trying to invoke it by using onLoad on Body tag…but it says that couldnt start…how to call it.?
i have a timer…
here is the code
function contador(){
setTimeout(‘Desce()’, 1000);
}
function Desce(){
$().slideto({
target : ‘#MyDiv’,
speed : ‘slow’
});
}
Thanks a lot.
Try:
$(function(){
setTimeout(function(){
Desce();
}, 1000);
});