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