Animate Page Scroll with jQuery

[demesamarcclenn]

Genius! thanks man!!!:))

[nycpd75]

i love hash 

[S3rbi4n]

how to activate slide without any event?! thanks, aleksandar.

[10goodday]

Hi,

Great tutorial! I used it for my site and it is looking very nice. My only issue is that my external links to other pages or other sites are not working. Is there a way to fix that?

Thank you :)

By the way, this is the first time I am working with jQuery ;)

[iiamshad]

Thank you very much for posting this awesome tutorial. I'm not sure if your answering any questions but I'll give it a shot. When using the "easing" technique is it possible to use the tooltop jQuery script also? Seems when I using a tooltop function then use that to scroll down it doesn't work. Its almost like I can only use on or the other. Let me know if this is possible. Again, thanks

[optikalefxx]

@iiamshad can you explain what the issue is a lil more? If your talkign about the jquery tooltip from jquery tools it might have issues because they don't follow the jquery standards. But idk yet.

[thomaskirk3]

Doesn't work with crhome. Any ideas why?

[optikalefxx]

@thomaskirk3 yes, chrome updated and killed some stuff. change the toPosition to this line

var toPosition = $toElement[0].offsetTop;

[thomaskirk3]

@optikalefxx Thanks alot! New to jQuery... I was getting ready to start coding a solution for smooth scroll in javascript... However, one line is a bit easier to change...

[nycpd75]

@optikalefxx how do i place this jquery effect to apply only to a div class? like i have a menu on the left side and a content div on the right site i want to click on the menu and the menu just stays and it automatially scrolls the right side to the a tag ?:S

[hal7mar]

Hey! couple of months ago thnx to your explanations i started to use jquery scrollto it s wierd now it works well by all browser except chrome:S when i just click to link it doesnt move anywhere.. what should i do? thnx

[itsrron]

my links are div tag not a tag and so are my anchor point ie: contact button(div tag) links to div id="contact" but it does not work

i changed the all the a tags to div tags in the script but still nothing?

[optikalefxx]

@itsrron You really should change them back to A tags. Reason is if javascript is turned off the anchors still work.

At any rate, lets see the code and ill take a look

[nycpd75]

@optikalefxx hey i need ur help !!!!

[TheAndroGeek]

Very nice animation ;) I going to try it :P

[lifeb4u]

Thank you so much! :D



[kalabiandarkness]

It's my first time to see those "$" signs. What does it do?

[optikalefxx]

@kalabiandarkness It doesn't "do" anything. $ by itself is an alias for jQuery. But infront of a variable it just is a visual que for me that that variable is actually a jquery object.

[hal7mar]

Its great!! thats excatly what i was lookin for..and it s workin fine by me except the speed:( as i click it just jumps..where m i wrong? can you help me pls? thx..

[optikalefxx]

@hal7mar does is scroll at all? or just jumps as if the animation isn't there at all?

[hal7mar]

@optikalefxx it does scroll(jump) when i click to link.. but whether i add that or not: $("body,html").animate({ scrollTop : toPosition },2000,"easeOutExpo");

it just jumps...

[optikalefxx]

@hal7mar Change easeoutexpo to linear

[hal7mar]

@optikalefxx doesnt change anything:( hey anywhere can i download all those codes? maybe i write wrong somewhere..its better dont take your time too..

[megmuzz]

I love the video. I ALMOST have it working on my page. It seems to only scroll to the top, and not to the other anchors. I have my anchors in separate divs that go down the page.

[optikalefxx]

@megmuzz does it work normal if you don't have the javascript? Make sure your naming your anchors and links correctly.

[vacholino]

dont return false at the end..use prevent default to prevent default browser behaviors... you are killing any script that precedent's with the return false.

[arnoldiusss]

Sorry i was typing the comment on my ipad and accedently hit send. I mean if you have a link to another page, like /otherpage.php#section3 the script will try to find and scroll to section3 on the current page and return false, so you cant reach other pages if the link contains a hash...

[arnoldiusss]

Dont you need to check if the Hash is on the same page? Otherwise

[optikalefxx]

@arnoldiusss What do you mean exactly?

[Joshy789]

Great video, thanks!

would this work horizontally or diagonally?

[iceteea]

Thank you for this, helped alot. :)

God bless!

[agerpic]

Wow! Your videos are so good! You explain everything very well and this scrolling animation effect is something I sometimes see on websites and always wanted to know how this really works!

I have a suggestion for your next tutorial if you want:

How to do a loading bar with js/jQuery that really shows the loading process while a part of the page is being loaded.

Is it possible to do such a loading bar like the one here at the top of the page: designersunited.gr

I know this one's a full flash pa

[optikalefxx]

@deejayedwards For some reason it doesn't work for the page.

[deejayedwards]

@optikalefxx Aaaaah right. Yeah, cause I'm just getting into learning jQuery and wanted this effect and couldn't for the life of me get 'ScrollTo' to work for the page. That would explain it, I thought I was going mental. Well thanks for the help, cheers.

[utsukusih]

I love this effect and so happy to have found this video! Again, you made it easy enough for a beginner to understand and follow, thank you...!!!

[optikalefxx]

@utsukusih great! I'm glad it helped you out.

[NeoReloaded00]

This video helped me out on a new business and marketing website i am about to launch and when i got the animated page scroll to work on my 'About us' section i was jumping around the room LOL - Cheers

[optikalefxx]

@NeoReloaded00 thats awesome! glad it helped.