How To: Jquery Scroll to Anchor and Scroll To Top (simple)
Learn how to customize and animate the anchor scrolling with jquery. Scroll to top of page with animation. Simple and complete jquery tutorial.
I was working on enavu.com (the network that owns and operates this website) and i wanted to create a single webpage layout, so I had to use the scroll to jquery plugin. [...]
Learn how to customize and animate the anchor scrolling with jquery. Scroll to top of page with animation. Simple and complete jquery tutorial.
I was working on enavu.com (the network that owns and operates this website) and i wanted to create a single webpage layout, so I had to use the scroll to jquery plugin. It is a very nice effect, that i feel is not overused yet.
First we need to add download the plugin from here. Then we need to include both jquery and the plugin in our page like so:
We’re almost done 
, now all you need to do is create the links and the anchor points in your page. To create the links use this:
In the href you chose the name for the id you will be looking for, and you must include the class anchorLink so the plugin knows where to look. Then you add the targets:
And it will scroll down the page untill the top of the page is the target anchor you selected. As simple as that! Have fun with this.
Oh yah and for the scroll to top it’s as easy as putting this right after the body:
Then place the link anywhere you want, the link will look like this:
Related posts:
- Simple Fast and Dirty Introduction to jQuery
- jQuery and Ajax :) the simple designer way
- How To Create a jQuery Plugin
- Working with cookies using jQuery and JavaScript
- Advanced jQuery Placeholder Plugin (cross-browser support)
Did you absolutely LOVE this article... share it!
Comments
Ignore this article, it’s pure and absolute tripe.
Read this instead:
http://www.w3.org/QA/Tips/goodclassnames
Hey Adrian, i would love to hear why you think this article is tripe. If you disagree with anything please state it here and i will come back with a response. Thanks!
I’m sorry but I would love to see you develop a huge website without using multiple classes with simplified structure names. I don’t know if you have ever seen the 960 framework which is the MOST popular in the world, but you will find those names are common and are semantic. Not sure what your experience is, but developing corporate websites requires classes that help the structure and lowers the style sheet.
UOw65v ssgpkollakzl, cijemzpzglqy, [link=http://ydnglcijzlbv.com/]ydnglcijzlbv[/link], http://vsblfevuztmz.com/
valium =-)) tramadol gnh
You could have done that without the jquery… All you are using is standard anchor with hrefs – no need to include any javascript at all.
Axel
you missed the point, this isn’t just a normal jump to anchor… this is a smooth scroll to anchor which you can’t do without javascript 
Leave your own!