Prototype page scrolling

Prototype page scrolling

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on March 10, 2009

I’ve been working on a project over the last few days that uses anchor links to direct the user to specific content on the page, but instead of just clicking the link and page snapping to the content i thought it would be nice for the page to scroll to the specific content. This technique can be achieved using Prototype effects.

You need to include to the Prototype framework and effects library as shown below. Both of these files are in the download.

<script src="prototype.js" type="text/javascript"></script>
<script src="prototype-effects.js" type="text/javascript"></script>

Place the code below along with the above in between the <head> </head> tags


<script type="text/javascript">
    Event.observe(window, 'load', function() {
  $$('a[href^=#]:not([href=#])').each(function(element) {
    element.observe('click', function(event) {
      new Effect.ScrollTo(this.hash.substr(1));
      Event.stop(event);
    }.bindAsEventListener(element))
  })
})

    </script>


So how do you use this?

Implementing this script is simple. After you’ve added the code above you need to create a, href and an ‘id’ as in the code below. The JavaScript then picks up the #top or whatever your id name is and scrolls the page to that div. The only thing to point out is that this method of navigating between ‘anchors’ isn’t saved in the users history as with traditional anchors.


<div id='top'></div>

<!-- This is where your page content goes -->

<a href="#top">Click here to go to the top div></a>
<a href="#bottom">Click here to go to the bottom div></a>

<!-- This is where your page content goes -->
<div id='bottom'></div>

demodownload

More tutorials from Papermashup
Comments
18 discussions around Prototype page scrolling
  1. Thanks , I’ve just been looking for info approximately this topic for ages and yours is the best I’ve discovered so far. But, what in regards to the bottom line? Are you positive concerning the source?

  2. Moe says:

    @aouse:
    new Effect.ScrollTo(this.hash.substr(1),{ duration:’0.2′});

  3. Paul says:

    Oh thank you very much. Works great.

  4. aouse says:

    Really nice, Thanks. How do you control the speed?

  5. SREE says:

    GREAT THIS IS REALLY INFORMATIVE,THANKS.

  6. Kendall says:

    Thanks Ashley. Very clean and simple.

  7. stowns says:

    thanks Ashley…I’m really new to java in general, I’ll give that a shot though.

  8. stowns says:

    how would i go about offsetting the final y that is scrolled to if I wanted it to stop a little short of the div?

  9. Thanks this code is sublime.

  10. Jess says:

    Bless you!! That was just what I needed!

  11. Rob says:

    This doesn’t appear to work with scriptaculous v1.8.1. Any plans on updating it?

  12. Rob says:

    Sorry i’m still new to this whole thing, i didn’t realize the prototype.effect file was scriptaculous.

  13. Rob says:

    Is there anyway to use effects from scriptaculous instead of the prototype effect js?

  14. AzeriFire says:

    Hi. Thanks for tutorial. I did it with JQuery at my mobile catalog CMS. For sample here . Just click on the icons (Bluetooth, Memory card, Camera and etc. ) I think the same things.

  15. Adam S says:

    This is how I do it on firsttube.com using jQuery:

    $(‘a[href*=#]‘).click(function() { /* smooth scroll, courtesy http://bit.ly/C1ML3 */
    if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $(‘[name=' + this.hash.slice(1) +']‘);
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $(‘html,body’).animate({scrollTop: targetOffset}, 1000);
    return false;
    }
    }
    });

    • Ashley says:

      @Adam It’s funny you posted that I was going to follow up with how you could do it with JQuery as a guy in the office uses it. Thanks for the comment!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Looking for a registry cleaner to speed up your PC and show a full diagnostics?
Faster surfing with Dish Network High Speed Internet

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in touch.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com you can find details here Or use the contact link below for further advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.