enavu webdevmania tutsvalley psdestination
visit the enavu network
12 Comments Article Title Overlay Article Title

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. [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Learn how to customize and animate the anchor scrolling with jquery. Scroll to top of page with animation. Simple and complete jquery tutorial.

jquery scroll to 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 smile, 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:

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. jQuery and Ajax :) the simple designer way
  2. Simple Fast and Dirty Introduction to jQuery
  3. How To Create a jQuery Plugin
  4. Top 10 jQuery Modal Box Plugins
  5. Working with cookies using jQuery and JavaScript

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.

  • 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 :)

  • If you use this on a menu then just make a wrapper around it and change the javascript to:

    $(document).ready(function() {
    $(“#wrapperid a”).anchorAnimate()
    });

    So you don’t have to give the links a seperate class :P

  • thank a lot for this!!!

  • Hey thank you – got it working..

    Have a small question though…

    How would you set an off set margin so its not so tightly aligned with the top of the browser window? I would like to try and give a little breathing room.

  • I believe something as simple as a margin or padding on the anchor should do the trick and add the breathing space you are looking for! And if that doesn’t work probably just adding a height 50px to the anchor will finalize the trick!

    Thanks,
    Angel

  • Thanks man…

    I’ll give that a go but I was hoping to try and append it to the “anchore.js” plugin if possible though.

    I tried adding a -20 value to “.offset().top-20″ but it only animates than bounces back 20 pixels – it doesn’t maintain the space.

    Either way I’ll try what ever works at this point.

  • Hey, thank you so much, i was looking for this and just you helped me

  • Would love some help with this function. Have tried various tutorials and just cannot get my head around it. This seems to be the most simple tutorial so far but still can get it work? If anyone would have a few minutes to spare to help I would appreciate it.

    Many thanks

    Steve Davies

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting