Smooth Scrolling Links

FAQs are tedious, but we can make their usage much more enjoyable (although I use this word lightly) by imroving the User Experience slightly.

Normal FAQs jump from the list of questions to the answer; with a simple bit of Javascript the page will smoothly scroll to the answer, and then–as a bonus–the answer will flash slightly.


Event.observe(window, 'load', function()
{
   $$('a[href^=#]:not([href=#])').each(function(element)
   {
      element.observe('click', function(event)
      {
         new Effect.ScrollTo(this.hash.substr(1),
         {
            offset: -12
         });

         if ( this.hash.substr(1) !== 'top' )
         {
            if ( Prototype.Browser.IE )
            {
               $(this.hash.substr(1)).setStyle({
                  backgroundColor: '#fff'
               });
            }

            Effect.Pulsate(this.hash.substr(1),
            {
               from: 0.5,
               pulses: 5
            });
         }

         Event.stop(event);
      }.bindAsEventListener(element));
   });
});

This script requires script.aculo.us

This entry was posted in javascript, prototype. Bookmark the permalink.

One Response to Smooth Scrolling Links

  1. bajal says:

    I like it..cool.
    A great alternative to the old hash-linking.

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>