Best WordPress

JavaScript SmoothScroll, vertical scroll smooth scrolling effect

12 Comments

One effect that attracts me most is the scroll of a local XHTML page, whether horizontal or vertical. Besides the effect, that if the same soul page, we often discover a whole range of content that normally would be lost without jumping from one content to another scroll.

Lately this kind of solution is increasingly popular among web-designers, new implementations of AJAX and using external JavaScript Frameworks are well meet these needs. There are many successful sites that use this effect, as Pivonka . eu , Designer.rs , AuthenticStyle.com , and many others .

We show three different ways to achieve this effect, either by simple script JavaScript Smoothscroll or via jQuery, which using the Mootools library. You can download the sample files and understand how the code of each, in every way you want imported script like this:

<script src="js/mootools.js" type="text/javascript"></script> <script src="js/moo-smooth.js" type="text/javascript"></script> 

Of course the choice of the script to integrate depends on various factors, especially related to the need for customization and integration with other scripts on the page, for example, you may experience conflicts between libraries jQuery and Mootools, although of course there are small hack resolve these inconsistencies, however, speak of this later in this blog.

Both for ease of use that capacity for customization of the various Tweens Transitions SmoothScroll Mootools is my favorite. What, you have no more excuses, choose what you prefer and that best fits your project ... smooth scrolling it now!

Simple Smoothscroll

View Demo

Download Source

JQuery Smoothscroll

View Demo

Download Source

Mootools Smoothscroll

View Demo

Download Source

Comments

maurizio
December 1, 2009

hello david, congratulations for the blog and thanks for posting examples of smoothscroll.
I have a problem using mootools and loading it on my page (which are already
no other java script) does not work ..
or rather, it works, but other scripts stop working .. For instance, the other scripts on this page are for the fancybox, depending on where you position it strings recall the script, the page range of operation ..
fancybox or does, or does the scroll, I think there is a problem of conflict combatibilità and then I read that long ago you wrote that these possibilities were predictable, but solvable .. Can you please help? has never happened to someone else a problem like this?

thanks in advance

David
December 1, 2009

Hello Mauritius
exactly as you say you can not use mootools and jQuery together because both use the common shortcuts, eg "$", and are in conflict. I think that what you put work first and the second not imported.
To resolve these conflicts can solve in different ways that you can find all described here:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

This is another useful link:

http://davidwalsh.name/jquery-mootools

The tutorial is very easy ... you practically in a solution overwrite the term in jQuery "$". Try to import the first jQuery else ..

Should you have other problems and are using such a Fancybox, install another image viewer compatible library of your choice. In this way, even on savings kb loaded!

I hope I can be state aid!

maurizio
December 1, 2009

thank you .. I read the 2nd link I had already visited this morning, but without having solved my problem
let's say that I tried because I do not understand what it says to do:)
I apologize for the ignorance on ..
if the solution is so simple overwrite of the term "$", can you tell me in two lines what should I do?

maurizio
December 1, 2009

I solved, thanks anyway!

maurizio
December 1, 2009

I ask only one thing, I see that the example you posted (and therefore on my page)
once operated scroll appears in the address bar says "# top" after my link ..
I saw on this blog does not, as you did?

David
December 1, 2009

I used another solution! Let me keep a secret ....
hello
d

Manuela
April 7, 2010

Hello David, congratulations for the blog!
Thank you for publishing this great article, because that's what I tried.
The first time I tried it on a html meager, with only the anchor, to see how it worked. And it worked:)
Now that I created the entire site ... does not work anymore: (!
Initially I thought he went into conflict with the Highslide script. So I removed to see if that was the problem, but still does not work. What could be the problem?
Thanks in advance!

David
April 7, 2010

hello, no source is a bit difficult .. cmq try a copy of the page and remove elements gradually until a thin version, so you know where is the problem. If all import controls with Firebug because maybe not trovalla library if you use jQuery or Mootools.
hello
d

Matt
May 11, 2010

hello david,
assoccio complimeti to me, very useful blog!
I wanted to ask you to convert from vertical to horizontal scroll parameters should I change?
I'm implementing Smoothscroll Simple.
thanks!
Matt.

David
May 11, 2010

Hello Matt, try jQuery, what use does not seem to support horizontal scrolling, in the case also tries to seek "horizontal smoothscroll" on google, you will find many examples now!
grz
d

Dominic
June 17, 2010

Hello David,
live blog and congratulations for the article in particular. I wanted to ask: is it possible to operate the scroll even if you come from an external page? I tried again with brutally with a link (eg # paginadestinazione.htm yet) but seems not work.

David
June 17, 2010

hello, operate from an external page is a bit more complicated, because when you finish link directly to the section ...
you should link at the top of the page (for a given id) and create a function here that after loading pgina rispara you to your section so you can see the effect.
hello

Add Comments