Prototype page scrolling

Posted on March 10, 2009 by Ashley

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

This entry was posted in Downloads, Javascript, Tutorials and tagged , , , , . Bookmark the permalink.
Comments
12 discussions around Prototype page scrolling
  1. 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;
    }
    }
    });

  2. 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!

  3. 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.

  4. Rob says:

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

  5. Rob says:

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

  6. Rob says:

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

  7. Ashley says:

    @rob yeah i may look into updating this in the future. You can do the same effect with JQuery if your interested.

  8. Jess says:

    Bless you!! That was just what I needed!

  9. Thanks this code is sublime.

  10. 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?

  11. Ashley says:

    @stowns i’d recommend using the jQuery page scroll plugin. i used it here: http://wedeliver.papermashup.com you should be able to take to code out of the page, its easy to offset with this function. I haven’t used Prototype for a long time :(

  12. stowns says:

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

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>

Subscribers
1,250
Twitter
510
Comments
1,207
Posts
125