Auto scrolling page navigation with $$
Written by on March 13th, 2007 in Ajax News.
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:
HTML:
-
-
<a href=”#about” onclick=”new Effect.ScrollTo(’about’,{offset:-140}); return false”>About</a>
-
and gets it down to the unobtrusive:
HTML:
-
-
<a href=”#about”>About</a>
-
and the nice new support for CSS 3:
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))
-
})
-
})
-
Check out the auto-scrolling demo to see it in action.
Source: Ajaxian
Original Article: http://ajaxian.com/archives/auto-scrolling-page-navigation-with