Scroll window smoothly in jQuery – Animated scroll
Using jQuery animate() function to do a smooth scrolling:
I have also created a div as follow:
<div id="scrollToHere">
Scroll to here
</div>
You need something to run your script. Create a button like this:
<input type="button" onclick="scollWin();" value="Scroll up" />
The jQuery Code will be like this:
function scrollWin(){
$('html,body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 2000);
}
Here is something to try:
now jQuery window scrolling is done with animation.
Enjoy it..
+119-2861 Comments to “Scroll window smoothly in jQuery – Animated scroll”
Leave a Reply
The down scroll is working fine. But the UP scroll is not. It jumps up without animation.
All you have to do is remove the (,body) from $(“html, body”)
Because Opera supports both. So, it scrolls twice.
Let the code be: $(“html”).animate…..
On safari, firefox and IEs: this code works fine.
Nice Thanks!
Just started using jQuery here a few months ago, love it! Can’t wait to read more from this blog. Know of any good jQuery Blog Aggregators?
Cool, thanks!
Thanks! Just wanted to point out a small typo, the onclick should of course read “scrollWin();” but an r was left out. A very small error, but it does break the script, so wanted to point it out in case anyone was having trouble.
Thanks Shick for your comment.
This is the first time I hear about flashing screen when trying this code.
Actually,
This code was tested on The following browsers:
- IE 6 and 7 (window)
- Firefox (windows and mac)
- Opera (windows and mac)
- Safari (mac)
I did not experience any problem with this code.
Please provide with all information about the jQuery version and your browser version.
Thank you so much!!!
I used the javascript fix, and it worked like a charm. thank you so much!!!!
Click 2 or 3 times in the scroll link and try using your mouse scroll wheel!!
The scroll animation keeps going. So, if you try to scroll the window using mouse wheel after clicking on the button, it will surely continue till the animation is done.
If you want to stop the animation in any action taken, then try to use $(“html,body”).stop();
this will stop all animations on window.
is there a simple fix for this to scroll horizontally, to the left?
Not working on ie8
Actually, It works fine on IE8
I tested it on IE 8 (Windows XP) and IE 8 (Windows 7). It works fine.
so yeah thanks a lot.
mispelling: “scollWin();”
Thanks for the suggestion Hiperblade.
I think i missed that out
When the site is scrolled to the top, the button “Scroll up” works by scrolling down… FF3.5
Amazing article, thank you!
Helped me a lot.
Works fine. Thank you for helpfully article.
Is there any way this can be used horizontally? Either to a div or using pixel locations?
Actually, there a Javascript code for that
window.scrollBy(x,y);
// X for horizontal and Y for vertical.
So, you can scroll window in both ways.
Works fine, tks
is very good
Good one.
simple and efficient,, Thanks
Thanks, Was really helpful!
hi
Thanks for this simple, usefull, and reusable tip
have a nice day
what if i am using it to have in several locations?
div id=1
div id=2
div id=3
div id=4
scroll to div 1
scroll to div 2
scroll to div 3
scroll to div 4
how can we do this? Its like this: at the bottom there are anchor tags that will need to scroll up/down on the specific div id. check the site i am working on to see what i meant, http://www.bryanvenancio.com
Thanks!
Thank you very much … It works …
nice examples
Great info, and very helpful. One question from a jQuery newbie – how would I add easing to this? Thanks for any help you can give!
To get the jQuery easing, see this:
http://gsgd.co.uk/sandbox/jquery/easing/
Nice plugin.
nice post
Thanks a lot ! It work without bug in all browsers.
This is a superb post Freelancer ID Blog .
But I was wondering how do I suscribe to the RSS feed?
thanks for this post, its by far the clearest and simplest way of using jquery to scroll I have found – the user comments helped with exactly what I needed as well!
de thing which i wants.
Cool Dude thanks
Wonderful post. It is really useful to scan your blog. This article connected with your site is exactly splendid, and your blog design is Simple generous. It seems not dazzled. So excellent.
de thing which i wants.
Cool Dude thanks
Great post! I am just starting out in community management/marketing media and trying to learn how to do it well – resources like this article are incredibly helpful.
Hmm, your site took quite a long time to load but it was worth it
I wanted to thank you for this great read!! I definitely enjoying every little bit of it.I have you bookmarked to check out new stuff you post.
Wow, this is a great article. I will browse that blog some more for the fine reading.
A topic close to my heart thanks. Like your blog design too.
You have mention good post above I really enjoy the information. I wish to come again on your site in future
Thanks for uploading such a nice scroller. Working fine everywhere…….
THANK YOU!
very interesting post – please do it again
i love reading your website
please supply me your rss feed
yes i like it very much
Thanx mate its very easy no need of other jQuery plugins …..
thanks for this useful post
Great article. Waiting for more.
Another excellent article! Thank you!
Yeahh you are the best!! Thanks for the script.
good work
good work
Thanks a lot !
Thanks a lot
Great! Works fine.
Thanks a lot.