A do-it yourself blog
Animated scrollto effect jQuery plugin
Howdy,
Since my post about this effect has a lot of succes I decided to make a little plugin to simplify it even more.
First of all go check out the Demo.
Download
You can download it from github or use git to checkout git://github.com/djpate/jSlideto.git
Setup
Get the script and upload jquery.slideto.min.js (it’s located in the js directory) to your web directory.
Now simply add the js in your
tags.for example
<script src="js/jquery.slideto.min.js" type="text/javascript"></script>
If you want to use the highlight effect you also have to install jQuery ui.
Usage
Basic
$("#someDiv").slideto();
No Highlight
$("#someDiv").slideto({
highlight: false
});
Customized
$("#someDiv").slideto({
highlight_color: 'blue',
highlight_duration: 'slow',
slide_duration: 500
});
Options
| name | default | info |
|---|---|---|
| highlight | true | true or false |
| highlight_duration | 3000 | A duration in milliseconds |
| highlight_color | FFFF99 | A color code |
| slide_duration | slow | A duration in milliseconds or slow,normal,fast |
Great plugin and like “Lukyer” I had to change “body” to “html” to get it working!
Oh .When I use the uncompress js file ,the effect meet my satisfaction.But,When I put the compressed file to my project,to my disppointent,the chrome is without problem,while,ie & ff didn’t scroll.
What about IE6 & 7?
Thanks for making this available. I am wondering what I might change if my page background color isn’t white. Currently if I use the highlight, it fades from the selected highlight color to white before disappearing. My page background is a shade of gray, so the effect isn’t working as I had hoped.
Cheers!
After some poking around, discovered that specifying a background-color on the div had the desired effect. Not sure if I should have to do that, but it worked for me.
Thanks again.
Great plugin. I’m wondering, does this only work for a single div or can it work for as many as you want? I am trying to add more but they do not seem to be working.
Good stuff! It is working a treat forme so thanks very much for sharing. Also, well done for taking the time to add an example to the zip. This made it a little easier to configure.
Hi, thanks for this plugin, works fine, but in my browser Opera 11.50 on my website i had to change ‘body’ to ‘html’ in selector in your plugin file. This change get it working like i expect. However, if i point my browser on your demo page, everything works fine too. My website is html5 valid, uses a lot of jquery libraries, so i really don’t know whats cause this bug. Mainly, that with html constructor it works.
Are you using the minified version ?
Hi. My script looks like this:
$(“#info”).click(function(){
$(“#info_p”).slideto({highlight: false});
});
$(“#munkak”).click(function(){
$(“#munkak_p”).slideto({highlight: false});
});
I tried to give another place where it should slide, but when I click on the div with id “munkak” it does not slide to the place with id “munkak_p”, it slides to the same place where the first script does.
This works with one destination? I think I’m doing it wrong. What’s the problem?
Thanks for this btw.
Your code looks fine. Do you have a link where I could look at it ?
Of course I did it wrong. Don’t need correction. Thank you.
Merci bien ça va beaucoup me servir !
cool, but not x-html. doesn’t work with this doctype:
As you can see in the comments, there is a problem with the minified version. Use the source and It should work !
Hello
No scrolling with a doctype.
What full version are you talking about?
The one for JQUERY (jquery.min.1.4.4.js)
for UI (jquery-ui-1.8.7.custom.min.js)
or for SLIDETO (jquery.slideto.min.js) ?
Where can i find the source version of slideto ?
Many thanks..
I’m taking about the source version of jslideTo you can find it here https://github.com/djpate/jSlideto/tree/master/source
Hi Christophe,
Great effect! I’ve used it on a few projects now. Wondering if there is an easy way to make it not scroll the content to the very top of the page? To have a little padding or margin? I have a DIV at the top (for navigation) and it is “position:fixed”…so when using the SlideTo, the top of the content, that is scrolled to, gets cut-off
Thanks for the code mate, but I am having the same doctype trouble too. Also I only have this specified:
$(document).ready(function()
{
$(“#menuHome”).click(
function()
{
$(“#home”).slideto(
{
slide_duration: 1000,
});
});
});
but it still highlights the whole section in a faded orange color, any idea?
Cheers mate!
Thanks, the source version works!
Great effects! Got it to work in Safari 5, but in Firefox 4 the scrolling effect doesn’t work with the doctype declaration . Removing the doctype makes it work. Do you have a solution for this?
Apparently the problem is in the minified version, if you use the source version it should work, I’m investigating why
I tried it in XHTML Strict.
I did get it to work with IETF DDT HTML EN, but the strict markup isn’t valid with that doctype.
Very nice effect. I can’t seem to get this to work in pages that have a declared doctype…
If I remove the doctype it works.
Any thoughts on how I can get this to work when declaring a doctype, or what the issue might be?
What doctype are you using ?
Hi Christophe,
Thanks for the script. There’s a couple of things I can’t work out how to do with this updated version, that I could do with the old version:
1. Scroll a particular scrollable div by specifying which div to scroll.
2. Add an easing effect. With the old script I could add easing effects after the duration, having included the jquery.easing.1.3.js script.
Can I do this with the new script? If not, can I add highlighting to the old script?
Thanks
Nick
I’ll try to post an example with the easing plugin today…
Thanks for the info, I fixed it now
Hi,
slide_duration parameter did not seems to work when I tried to set it, so I took a look to your source code and found you wrote ‘options.duration’ instead of ‘options.slide_duration’ at line 37.
Now it works for me, I hope it can help…
Enrico
Great creation here. Quick question. Does it only work up and down, or could I get it to scroll left to right as well?
Thanks! Yes it works up&down but not left to right. Shouldnt be that hard to modify thought
Hi Christophe,
Thank you very much for the plugin.
It works on all browsers I’ve tried but both highlight and slide durations have no effect at all. Are you aware of this?
There is an error in my post you have to pass milliseconds as int not as a string…
slide_duration: 5000
instead of slide_duration: “5000″
In the demo you can see the duration is working
Glad to help
Hi Christophe,
Thank you very much for your quick support, it works in both IE8 and Mozilla 3.x!
I dont have a iPad at hand but i’ll check when i get home.
Once again thank you very much for your help!
Hi, thanks for your quick response!
In IE and FF the div indeed gets highlighted and doesnt gets scrolled to.
http://dev.lydic.nl/index.php/news.html
tested with:
mozilla 3.6.13
Chrome 9.0.597.98
IE: 8
Also on the iPad with Safari, it highlights, but doesnt scroll.
Is my setup wrong since yours does works ?
I’ve made a new version that should fix you bug. Try it out and let me know…
Hi!
Thanks for all your great work, it is really a nice plugin!
I have downloaded the latest from your site and placed it on mine and it works great in Chrome, only Firefox and (offcourse) IE dont really know what to do. In mozilla and IE it hightlights the div.
I use jquery-1.5.min.js, jquery-ui-1.8.7.custom.min.js and your plugin jquery.slideto.min.js on my site.
I compared it with your example page and i see you are using 1.4.4 lib. could this be a difference for the browsers?
I appreciate any help you can give, even if you decide not to respond to my request
With other words, no hard feelings.
Thanks in advance!
Roberto
I’m sorry but I’m note sure I understand your question… Do you mean that in IE & FF the div is only highlighted and not scrolled to ? Can I have a link to your website ?
Looks awesome! Tried to download from github and got an error. Any chance you could also host it somewhere else? Thanks!
I updated the link, does it work for you now ?