jQuery Slide to Plugin

jQuery Slide To Plugin

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.

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.

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.

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)

 

16 thoughts on “jQuery Slide To Plugin

  1. Daniel Dechert

    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.

  2. Hans

    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

  3. Maxwell

    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?

  4. Santoir

    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

  5. Sean

    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?

  6. Jesse Price Post author

    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.

  7. Ian

    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.

  8. dave

    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 with javascript:void(), since I tend to use ‘#’ for dummy links while developing.

    cheers

    dave

  9. dave

    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

    1. Jesse Price Post author

      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.

  10. dave

    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

  11. andy

    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.

Comments are closed.