Hey folks,
I’m not sure if this is done with JS or CSS3.
Firstly, look at the navigation here: http://cudazi.com/
Usually when you specify a link to jump to a section of a webpage, the jump is ‘instant’.
For example:
<a href="www.example.com/fruits.html#bananas">Go to Bananas!</a>
However, the jump at Cudazi is rather smooth.
Anyone know how to achieve this effect?
this is javascript or jQuery.
as you said an anchor jump is immediate. I think this script measures the current position and the target position and the uses the window.pageYOffset (document.documentElement.scrollTop in IE) method of js (not that the scroller moves on the side bar).
Hello dresden,
It appears to be JS indeed, since I disabled JS on my browser (should have done this before :)) and the jump became instant.
As I have this topic started, does anyone know if this can be done with HTML5 or CSS3?
If JS is more apt for this effect, can someone show me how this is achieved?
Thank you.
I’ve been using a script that I cribbed from elsewhere to achieve this effect on my website. There’s an article about it here on Sitepoint, but you can get it from the horse’s mouth at http://www.kryogenix.org/code/browser/smoothscroll/
Wow, what a perfect example of how NOT to build a website. Fixed height areas, broken navigation, overreliance on scripting for nothing, absurdly undersized fixed metric fonts, color combinations below accessibility norms…
And you want to know how it works? Simple, it doesn’t!
Here is the one I use. http://www.visibilityinherit.com/code/smooth-scroll.php If you want to use id instead of name then just change the one instance of name in the script to id like I did.
I won’t deny that the Cudazi site has lots of, ahem, “features” that we wouldn’t want to see copied, but that isn’t a helpful response. Haopei was asking how to implement a specific feature and pointed to that as an example of a site where it is used. Slagging off that site as a whole doesn’t get us anywhere.
A better response might be to educate the OP on why not to use features like this instead of basically calling him and the sample page out.
Haopei, some good advice. Try to stay away from unnecessary bells and whistles on a page, like what you are looking to implement.
For one you are adding all this extra code, download time and HTTP requests without much benefit to your end users. So in other words you are hurting yourself and your page more than helping out your site visitors.
Bells and whistles, when used effectively must offer your user some benefit/use to the content/page they are viewing. A good example is if you want to showcase your skills, then put them on a sample page.
So in essence, when you want to implement something like this, the first question to ask yourself.
“How does this benefit my end users?”
and the second question is
“Do the pros outweigh the cons?” (HTTP requests, download time, bloated code.)
You just put the scripts at the very bottom and it slows nothing visually. The little loading symbol may keep spinning for a while but the user has full access to the page so it’s of no consequence.
which goes back to why implement it in the first place?
Actually the smooth scroll is in some ways more accessible than jumping straight to the in-page section. Users are often totally confused by in-page links and when it happens so quickly they think they are on another page. The smooth scroll gives a good visual clue as to what’s just happened.
It’s the same approach to adding delays to CSS flyout menus to make them more accessible. If you enhance things but leave them still working in the basic form then there is no problem as long as the methods you are using are clean and do not detract from their use.
Perhaps the question is more about whether to use in page links or not or just open a new page as the user expects.
Ah Paul, you always have a way to make things clearer. 
I would then suggest opening up the content in a new window or modal box. I agree with the scrolling inpage is not the most visually pleasing way to do things. But it also depends on your audience too.
Why implement it in the first place? 9 times out of 10 the script will be downloaded by the time a user uses it. And in this case, they are no worse off if they havn’t. If it’s something crucial to the workings of the page then yes put the script up top. I’m dealing wit this now. And I decided that it is more important to have the content display quickly than to have them having access to all the bells and whistles imeadiatly. But in the case of the smooth-scroll.js it’s a moot point anyway because the script is so small we are only talking milliseconds here.
Lots of info here guys, thanks.
@deathshadow60, thanks for instigating the pros/cons discussion.
@AtSea @Paul, I actually am using this method to create a step-by-step ‘walkthrough’ page of how my website works, and highlighting its features. I find that I more likely click on all the links on websites which use this smooth scroll feature. Paul is right, it may get confusing using in-page links without the smooth scroll.
Thanks for the info again.
My point exactly.
Haopei, some good advice. Try to stay away from unnecessary bells and whistles on a page, like what you are looking to implement.
Good advice, and I live my web design life by it, but I really like this feature.
For one you are adding all this extra code, download time and HTTP requests without much benefit to your end users. So in other words you are hurting yourself and your page more than helping out your site visitors.
It adds 1 extra HTTP request and a 4.5KB script download per site visit. That is nothing in the context of a typical website. Blink, and you’ve missed the extra time it takes to download. We’re not talking about downloading the whole of JQuery here, it’s a very light script.
Bells and whistles, when used effectively must offer your user some benefit/use to the content/page they are viewing. A good example is if you want to showcase your skills, then put them on a sample page.
There are big accessibility/usability advantages to using SmoothScroll or a similar feature. If you have a lot of in-page links, people will often get confused by them. They click on a link and bang the view instantly changes. It’s quicker than a page load. Has a new page loaded? They’re not sure. If a new page hasn’t loaded, what has happened? They’re not sure. Has the view actually changed at all? Some of them probably aren’t even sure of that.
With a smooth scroll script, not only do you get a funky visual effect, but you get a visual indication of what is happening. By showing them the page scrolling up or down to get to the point they are going, you are giving them a better mental picture of the site/page structure. They know that to get back to where they were, they can just scroll back the other way. They can probably continue scrolling up and down to find more content on the page.
As I said, I really like this script. I have been using it on one of my websites for over 3 years now, and have not had a single complaint about it from any visitors.
@stevie d, thanks for the resource
I have side with Shadow, but what really got me was that his method necessitates that the “main nav” be repeated… It made me think, “eliminate clutter via repetition?” The effect is nice, it does provide UI clues … but maybe this is not the best application of it.
An alternative might be to create “UP” and “Down” (or “Next” and “Previous”) rather than being repetitive.
However, I don’t feel there is much problem with the repetitive links.
Another example of this method at work is at Envato.