Creating the Smooth Scroll Effect with JavaScript

Andrew Johnson (ITNewb Guru) wrote 8 days ago

Try adding the following line after where the speed is set in smoothScroll(); That will ensure the time between each execution of window.scrollTo() doesn't exceed 20 milliseconds. If you want to allow slightly slower scrolls when scrolling long distances, you might try 23, 24 or 25.

if (speed >= 20) speed = 20;

Cheers!

Emiel (Site Newb) wrote 8 days ago

Hello Andrew,

I love this bit of script cause it lets me set the step for the scrolling. My page now has an animated background only on scroll!

I do have a problem though because on Firefox 3.6 on windows, it doesn't seem to want to scroll at the right speed when I set the speed to a very low number (below 10 for example). It stays at a smooth scrolling speed. I'm not getting to the bottom of my page fast enough : ( Do you have any suggestions for me? Thanks!

Spence (Site Newb) wrote Jun 25, 2009

Thanks for the speedy response, I feel very welcome :D

The Carousel isn't exactly what I'm looking for. I'll make a more complete mock up of the site and pm you.

Andrew Johnson (ITNewb Guru) wrote Jun 25, 2009

Hey Spence,

Yea, that's only good for vertical scrolling. It sounds and looks like what you're really going for is a JavaScript Carousel, such as jCarousel. At some point I plan on creating my own carousel but I haven't done it yet. Your best bet is to give jCarousel a try or check google.

You can see a jCarousel example Frank did here: http://franklakatos.com/elvis/.

If a carousel isn't what you want, give me a detailed description of how you want it to work and I'll try to at least give you some direction.

Hope this helps, and I apologize for not being more helpful I'm just really busy this week finishing up the next round of site updates.

Cheers, and welcome to ITNewb =)

Spence (Site Newb) wrote Jun 24, 2009

Great article. Unfortunately for me, I'm not yet smart enough to apply this to my situation. I'm looking to use your smooth scrolling in a horizontally scrolling div section. Here's what I have so far:

http://people.clemson.edu/~javinge

Any help would be appreciated.

Andrew Johnson (ITNewb Guru) wrote May 20, 2009

Alright, as chrisd pointed out documentElement is needed after all. He was using Windows XP SP3. So, I've gone ahead and updated the article and demo.

Andrew Johnson (ITNewb Guru) wrote May 19, 2009

To further clarify, some resources such as this one, claim when IE 6 goes into standards mode we need document.documentElement, otherwise document.body. The check they give:

var iebody = (document.compatMode && document.compatMode != "BackCompat") ?
    document.documentElement : document.body;
 
var dsocleft = document.all? iebody.scrollLeft : pageXOffset;
var dsoctop = document.all? iebody.scrollTop : pageYOffset;

A while back when I wanted to add some smooth scroll functionality I used a similar check to be safe (due to reading a resource like the one above) and didn't put much more thought into it. Then when I decided to write an article about it and tested, I found the check appeared pointless and removed it from the article but forgot to remove it from the demo.

If anyone can substantiate the check please comment and let us know.

Andrew Johnson (ITNewb Guru) wrote May 19, 2009

Thanks Guillaume, appreciate it! I've left the code as is in the article and updated the demo.

So the correct code is as follows:

function currentYPosition() {
    // Firefox, Chrome, Opera, Safari
    if (self.pageYOffset) return self.pageYOffset;
    // Internet Explorer 6, 7 and 8
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}

Guillaume Denormandie (Up and Comer) wrote May 19, 2009

Ok i've just tested on a true IE 6 and without a doctype and it only used document.body.scrollTop

Andrew Johnson (ITNewb Guru) wrote May 19, 2009

There is also some claim that IE 6 will use document.documentElement.scrollTop when it's in standards compliant mode otherwise it will use document.body.scrollTop. I can't substantiate this though, as my IE 6 standalone, IE 7 and IE 8 all use document.body.scrollTop. If you have a true IE 6 would you care to let me know whether it uses body or documentElement?

Resources on the net seem to indicate the documentElement is needed, but my testing says otherwise. I even tested with different doctypes and without a doctype in the HTML.

Hot Spots

Information

Powered By

Requirements

Copyright / Usage