(3 votes, average: 3.67 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.
Here are my demonstrations.
http://dev.jesseprice.com/dev/slideto/
*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 Panama City Beach, 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. He currently works full time as a programmer for bookit.com, an online travel company.
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?