Smooth Link Scrolling

.

I just am a sucker for anything that is not common or anything beyond the regular. In jumping to a named link within the same page for instance, what happens normally is that as soon as you click on the anchor link, the page kind of flashed and you are on the destination link. If you’re not web savvy, you wouldn’t know whether you’re still on the same page, or whether you were transported up or down the page.

I bumped into a few smooth scrolling techniques but there’s this one that does not cause a headache as it is as simple as uploading a script to your site. It involves the use of this little piece of javascript called ‘smoothscroll.js’. It is old, as its last update was way back in November 2007, but it works. If you had clicked on the ‘Click here’ link above, you would have noticed that you were transported to the bottom of the post with a smooth scrolling effect. Not much value to it actually, if you think about practical usefulness. In fact, if you are a reader who doesn’t want to waste time, you wouldn’t probably want this as it would take more than the usual fraction of time it takes to jump from one link to another within a page. Like I implied above, this kind of thing is admired only by those who appreciate something that is ‘different’ from the rest. In life, this parallels one of those ‘little things.’

Anyway, this is how I did it for this post.

1. I downloaded the smoothscroll javascript. (Right-Click, Save As smoothscroll.js)
2. Then, uploaded it to my ‘wp-includes/js’ folder.
3. I referenced the javascript by typing the following line as the first line of this post:
   

   '<script type="text/javascript" src="http://moralde.com/ 
      wp-includes/js/smoothscroll.js"></script>'

I only did step 3 that way because I only wanted to show the smooth scrolling effect on this particular post (not site-wide). I am not very php savvy, so I don’t know if this is safe to do.(Probably, it is, because this is also how you insert the google adsense scripts on any part of a post). If I wanted to have the smooth scroll effect available site wide, I would need only to edit my header file and insert that line (in step 3) there instead.

If I knew how to make wp plugins, I would have created a plugin for this. Then I would have submitted it to the wordpress’ plugins site and requested to have it placed under the ‘not very useful plugins’ category. 🙂

Javascript Source: Kryogenix.org
Note: You wouldn’t see any smooth scrolling effect if your browser has javascript support turned off.
Pictures: Oh, me and my son just watched the ‘Avatar’ movie. It’s still in my head so that explains why I used these images on this post.