Click here to scroll down to a named link at the bottom of this post.
Don’t worry, this is not an ad I can earn from. 🙂
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.
- I downloaded the smoothscroll javascript. (Right-Click, Save As smoothscroll.js)
- Then, uploaded it to my ‘wp-includes/js’ folder.
- 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.
It made my head spin James, but then I can’t play games games like Call of Duty for too long as they give me vertigo. Personally I prefer to be instantly transported to the proper destination, but I reckon there would be a lot of people that would love the scrolling effect.
.-= Sire´s latest blog ..Top 7 Reasons Why People Don’t Return To Comment On Your Blog =-.
Ha ha ha…Exactly why I used it for this post only, as a demo of its effect. I don’t think it’s good to use site-wide because a reader who happens to read 2 or 3 posts with this scrolling mode on will soon suffer from ‘scrolling dizziness’. While testing it, I myself thought I still had some hang-over from the other night’s videoke fun. 🙂
Phew, I’m glad it’s not just me then because I was starting to get a complex. 😀
.-= Sire´s latest blog ..The Journey To Bloggersville =-.
nice post my friend
maybe it’s my last comment in this year 2009
Happy New year 2010
.-= willy´s latest blog ..The Three Steps to DeveloThe Triad Steps to Processing an Impelling Individual Employment Thoughtping an Effective Personal Development Plan =-.
Smooth scrolling is a cute little feature. Hard to measure the value but it does help create a mini wow factor when used appropriately.
Yeah, there probably comes a time when you’ll want to use this.
.-= noelmoralde´s latest blog ..Bugs Bunny Poster =-.
Wow, this is cool. Going to grab it. Thanks mate
.-= steppinout´s latest blog ..15 Free Web Services and Tools To Monitor Your Website Uptime and Downtime =-.
Thanks buddy. 🙂
This is what I was searching for. BTW, may I know how u made the no. of comments near each commentator?
Hi Senthil, nice to see you here. 🙂
The number of comments near each commentator? Actually, I didn’t do anything. I believe it’s an effect brought by Lucia’s Linky Love plugin. The plugin counts the number of comments made by a commenter so that when it reaches 3 (or whatever you set), it ‘DoFollows’ each of that commenter’s name-link henceforth.
What a great technical tip! Like you, I enjoy neat little finds like this. Thanks for sharing!
Your welcome Kimberly! Thanks for visiting my humble blog. 🙂
Cool. This is neat bro.
Glad you liked it Ark. It is something one might find cool to use once in a while, but not all the time.