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>
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;
}
}
});
@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!
Rob says: Is there anyway to use effects from scriptaculous instead of the prototype effect js?
Rob says: Sorry i’m still new to this whole thing, i didn’t realize the prototype.effect file was scriptaculous.
Rob says: This doesn’t appear to work with scriptaculous v1.8.1. Any plans on updating it?
@rob yeah i may look into updating this in the future. You can do the same effect with JQuery if your interested.
Jess says: Bless you!! That was just what I needed!
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?
@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 
stowns says: thanks Ashley…I’m really new to java in general, I’ll give that a shot though.
Subscribe to all the Papermashup Tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
Follow us on Twitter and get in-stream messages
12 discussions around Prototype page scrolling