thanks, it's really cool.

It's smooth for the most part. I do get a 2 "clicks" the first usage.

Doesn't work in Opera

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 for the help, i've been looking everywhere for an explanation on the ability to scroll smoothly to an item in jquery, but this is the first that has worked for me.

however, when i attempt to use the function with a link as opposed to a button, i get a screen flash in firefox and ie and chrome. here's the link vs the button.

code
*a href="#" onclick="if($.browser.opera){$('html').animate({scrollTop: $('#header').offset().top}, 2000);} else $('html,body').animate({scrollTop: $('#header').offset().top}, 2000);">TOP JQ*/a*

*input type="button" style="border: 1px solid rgb(51, 51, 51); background-color: rgb(102, 102, 102); color: rgb(255, 255, 255);" value="Click here to scroll up" onclick="if($.browser.opera){$('html').animate({scrollTop: $('#header').offset().top}, 2000);} else $('html,body').animate({scrollTop: $('#header').offset().top}, 2000);"/*

please let me know if you see anything that may be causing this, or if my code has some sort of error in it. this is my first real attempt at jquery and js, so any help would be awesome. the * represent the tags, it wouldnt let me post otherwise

Thanks

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.

i'm using jquery version 1.3.2.

Browser Versions
Firefox 3.0.12
IE 6, 7, 8
Chrome is on the latest verison, i'm on a different computer.

thanks for the reply, and like i said, it's only when i use the code as a link. when i use it as a button, like you have it, it doesn't flash, even when both link to the header.

Should I be using it "onclick" like the button when i'm using it on the link?

thanks again!

I think i've got the problem..

If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)

To fix this, Please try to use the following:
- Put "javascript:;" in the HREF attribute of the A tag.
- Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.

This will fix it.

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.

it does work in opera. this is lame such a function wasn't included inside jquery itself, it is so basic.
(prototype does it out of the box). saying this 'cause jquery end up with lame plugins that do zillions more stuff more than just that, wich in a way sucks.

so yeah thanks a lot.

mispelling: "scollWin();"

// nice work

// -- only a suggestion
// any click add animation :
// many click => many animations
// You can add a flag (and a call back) to disable queuing of animations
// and/or add a position check to prevent animations unwanted

var scrolling = false;

function scrollWin(){
if(scrolling == false){
scrolling = true;
$('html,body').animate({scrollTop: $('#scrollToHere').offset().top}, 2000, "linear", function(){scrolling = false;} );
}
}

Thanks for the suggestion Hiperblade.

I think i missed that out ;)

This is great, but only one problem. I can't work out how to get it to work within a DIV - ie. I have an overflow DIV on a static page, and I just want to scroll within the DIV.

I'm probably doing it wrong, as I'm a complete n00b, but any advice would be much appreciated.

Thanks,

Chris

Well Chris,

In this case you should work with the following CSS properties to get it work:
- TOP

If you are using a DIV inside your div (overflowed), This means your code will be something like this:

<div id="overflow"> // Ths should has CSS: position: relative;
<div id="scroller"></div> // This must has CSS: position: absolute;
</div>

then you can use the jQuery code:
$("#scroller").animate({'top','100px'},400); // For scrolling the div down.
$("#scroller").animate({'top','0px'},400); // For scrolling the div up.

This means that you will scroll the DIV (id="scroller") within the DIV (id="main")

Good luck Chris.

When the site is scrolled to the top, the button "Scroll up" works by scrolling down... FF3.5

Actually,

When you scroll it (I mean by clicking one of the buttons), It goes to a location.. No matter where the location is.
You may use a calculation instead of #id.
something like this:

// Scrolling Down
$('body').animate({
scrollTop: '-=300px'
}, 2000);

// Scrolling Up
$('body').animate({
scrollTop: '+=300px'
}, 2000);

thanks for great article
i have a series of tutorials about form's validation using JQuery , i will be happy to read your comments
http://bit.ly/8xSB7F
http://bit.ly/8W2Vmf

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.

Have this type of action working great on above mentioned page...but...the links are in the menu. Soooo...if I'm NOT on the conditions page AND click a link that would normally scroll great IF I was on the conditions page scrolls all content above it up under the menu and header. Any idea how to fix this?

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, www.bryanvenancio.com

Thanks!

Actually,
the website you mentioned is a photo gallery. And this is something different.

If you want to scroll THE WINDOW vertically, you can use the above code.

But the code used in that website is moving the DIVs or UL left or right. It's completely different.

Thank you very much ... It works ...

Hi, i wonder if its possible for the scrolling to be left and right? I've been searching in google for a few days for a similar function but instead of up down, i want it to scroll images left and right. Thanks :)

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.

This article has great reference value, thank you very much for sharing, I would like to reproduced your article, so that more people would see it.

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

Just shows that writing by means of knowledge brings so much depth and relevance to ones readers. Thank you for sharing.

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.

Shick and freelancer- Thank you for your questions and answers regarding the screen flashing problem-- this answer is also in the scroll.to online documentation however for noobs like me, I didn't understand what it was saying to do- but, hey, that's how we learn!

Wow, this is a great article. I will browse that blog some more for the fine reading.

It's quite interesting.I will look around for more such post.Thanks for sharing.

A topic close to my heart thanks. Like your blog design too.

Excellent content. I recently stumbled upon your blog site and want to state i have actually appreciated reading your blogs. Any way I will be subscribing to your feed and also I'm guessing you'll post again soon.

This is awesome, please keep writing.
Good post!As i was passing by here and i read your post.
It's quite interesting.I will look around for more such post.Thanks for sharing.

It is my pleasure to read your article! Thank you for sharing! good luck!

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....... :-)

thanks for the useful piece of writing. I was initially glad once i read ones posting and also have made an important membership to it. You need to up-date this article when you are able because I would like more information.

Hi, I will appreciate if anyone can help in this issue..

Please check this site:
http://grafixidea.com

If you're using IE/FF/Safari/Chrome you should find the scrolling functions works fine, but when you use Opera, It will not work at any link but the "contact" link in the main navigation.

I'm using the following code in the HEAD to apply a smooth scrolling effect when navigate to anchors in the same page:


*script type="text/javascript"*
if($.browser.opera){
var jump=function(e)
{e.preventDefault();var target = $(this).attr("href");$('html').animate({scrollTop: $(target).offset().top},1500,function(){location.hash = target;});}
$(document).ready(function(){$('a[href*=#]').bind("click", jump);return false;});}
else {
var jump=function(e)
{e.preventDefault();var target = $(this).attr("href");$('html,body').animate({scrollTop: $(target).offset().top},1500,function(){location.hash = target;});}
$(document).ready(function(){$('a[href*=#]').bind("click", jump);return false;});}
*/script*


before I use ( if($.browser.opera) else ) It was completely mas in opera it was doing strange things!! after that it works just like the current case. is there any advice to let the code work correctly in opera as well?

THANK YOU!

very interesting post - please do it again

Thanks very good for report, I follow your blog

i love reading your website

please supply me your rss feed

yes i like it very much