Tuesday, March 13th, 2007

Auto scrolling page navigation with $$

Category: Examples, Prototype

Tobie Langel likes a fistful of dollars and uses them to explain how to use auto scrolling page navigation with the new $$ operator in Prototype 1.5.1 RC.

The article takes the initial:

  1. <a href="#about" onclick="new Effect.ScrollTo('about',{offset:-140}); return false">About</a>

and gets it down to the unobtrusive:

  1. <a href="#about">About</a>

and the nice new support for CSS 3:


  1. Event.observe(window, 'load', function() {
  2.   $$('a[href^=#]:not([href=#])').each(function(element) {
  3.     element.observe('click', function(event) {
  4.       new Effect.ScrollTo(this.hash.substr(1));
  5.       Event.stop(event);
  6.     }.bindAsEventListener(element))
  7.   })
  8. })

Check out the auto-scrolling demo to see it in action.

Posted by Dion Almaer at 8:16 am

3.8 rating from 67 votes


Comments feed TrackBack URI

Sweet ! It seems to be easy to port it to mootools or other frameworks.

Comment by Boris Popoff — March 13, 2007

i think we all ready to add ppk events in prototype.js (like it’s already done by http://www.danwebb.net/lowpro/ ) to RIGHT handle events in Safari (to handle Event.stop)…

becouse this example again don’t work in Safari yeah…

Comment by Vital — March 13, 2007

i mean http://projects.danwebb.net/wiki/LowPro

Comment by Vital — March 13, 2007

Vital: which version of Safari are you using ?

This is working for me both in Safari 2.0.4 and in WebKit.

Comment by Tobie Langel — March 13, 2007

What the hell are you talking about Vital, it works fine in Safari.

Great article on the power of Prototype’s revamped $$.

Comment by Anonymous — March 13, 2007

@ Boris Popoff : this functionality is already available in mootools : the plug-in SmoothScroll

Comment by Delapouite — March 13, 2007

ok, i get it, so much developers has latest version of Safari and don’t think about a bit old version…

Comment by Vital — March 13, 2007

anyway article is great! ;)

Comment by Vital — March 13, 2007

Vital, could you let us know which version of Safari you are running ?

Comment by Tobie Langel — March 13, 2007

2.0.1, 2.0.3 of course it work in latest 2.0.4

Comment by Vital — March 13, 2007

MooTools already has this. It’s known as SmoothScroll.

Comment by Eric — March 13, 2007

for mootools, SmoothScroll takes document.links, is a lot faster then $$:
How to use …

new SmoothScroll();

Thats easy ;) It also works on Safari. The shown example here is also a bad pattern because it does not set the url fragment correct. Page scrolls but url fragment does not change as expected.

Comment by digitarald — March 14, 2007

Ok guys, we get it mootools has something similar, but the author wasn’t trying to replace mootools with this, simply showing the power of $$(), Prototype 1.5.1rc2 has tons of awesome features, why dwell on a lacking novelty like smoothScroll. Also please read the previous posts, the herd of mooTools users sound like a broken record.

Comment by annoyed — March 14, 2007

Is there some real benefit from this? I’d like to point out that the actual functionality has been around since, what, like 1993? So we’re doing what here, slowing the process down? Why?

And what’s next? Simulated page loading?

Comment by CrackWilding — March 14, 2007

@ CrackWilding: As I’ve mentioned in my post, on a UI perspective, this is IMHO better, as it clearly shows the user if he is taken further down the page or back up.

Comment by Tobie Langel — March 14, 2007

Nitpicking: As you said in http://ajaxian.com/archives/prototype-151-release-candidate-released, the $$ operator is not new in 1.5.1, it just got a lot faster, and it now fully supports CCS3, so now it an be more easily used.

Comment by splintor — March 18, 2007

Leave a comment

You must be logged in to post a comment.