This post will introduce and explain the “scroll to anchor” method I have used throughout this site. For a demo, click “scroll to Comments”, which you’ll find above.

See how it smoothly scrolls the page until it reaches the comments section? There is another example of it in action on my Photo Selection Smorgasboard, where I’ve used it to allow people to scroll to the different sections of the page, then back up to the top.

Why should you use it? While the traditional method is fine, it doesn’t really scroll, instead snapping straight to the anchor. I find this quite jarring – not part of the experience I attempt to offer visitors to my site.

The scroll method that I use is straight-forward, and is easy to add to any page. The javascript code is taken from this page: Animated Scrolling With jQuery. I found that tutorial a little hard to follow ( I think it is written for people with far more skill than I possess ), and was only able to get nice scrolling to work after examining that page’s source and trying things out on my own. The javascript I’ve packaged into a snippet for you is taken from that site, and can be found at the usual place – Code of Interest.

As I found it a little difficult, I thought I’d share with you, in simple English, exactly how to implement this smooth scrolling in your site.

1) Download the jQuery javascript library, download the Simple Scroller Snippet.

2) Upload the jQuery file to your server, open page inspector (⌘⇧I) and select the “Header” tab. Into the Header field, paste:

<script type="text/javascript" src="PATH_TO/jquery.js"></script>

Replace PATH_TO with the URL pointing to this file.

3) Change from the “Header” tab to the “Javascript” tab. Drag the “Simple Scroller” snippet into this field.

If you have existing jQuery code in your javascript tab, remove the 1st and final lines from the “Simple Scroller” snippet, and paste the remainder into the javascript tab, between the first and final lines of the existing jQuery code. Reason:

$(document).ready(function(){
    //    jQuery code
    });

Wraps jQuery code, and is needed only once.

Ok, so this page is now set up for scrolling. We just have to add something to scroll from/to.

4) To add a link that scrolls to point X, use:

<a href="#X">Scroll to Point X</a>

And at point X:

<div id="X">Point X</div>

That’s it! When a visitor clicks on the link, the browser window will scroll to Point X – if javascript is enabled, the scrolling will be smooth and pretty, but if it isn’t, it’ll still scroll – it just won’t be as luxurious.

To make the “Scroll to Comments” links, this is what I use:

At the top of the page:

<div id="topScroll_to_Anchors"><a href="#commentsScroll_to_Anchors">Scroll to Comments</a></div>

At the top of the comments section:

<div id="commentsScroll_to_Anchors"></div>

Finally, beneath the comments section:

<a href="#topScroll_to_Anchors">Scroll to top</a>

Easy.

Simple Scroller Snippet’s User Rating:

Scroll to top

Related posts:

1. Using PNG Transparency + the jQuery Colour Change Plugin A tutorial describing how to achieve the "colour change on roll-over" effect used in this site's RSS and Twitter links in the sidebar....
2. jQuery Error: ‘g is undefined’ Scroll to comments Discovered the cause of this annoying (but seemingly impotent) error in a response by Karl Swedberg on Nabble. The error was caused by my passing only one function to jQuery.hover(), eg: jQuery(".blog-entry-date").hover(function(){ jQuery(this).animate({color: genHex()},100); [...]...
3. Fancy Footer So I created a PHP script that is included in the "Prefix" of my blog pages. It consists of one function that is passed a few pieces of information, and spits out a nicely formatted footer section....
4. Shadowbox rel=’shadowbox’ Doesn’t Work? Here’s a Workaround Yesterday I was trying to implement a Shadowbox contact form in the Bay of Islands SPCA site, but I just couldn't get it to work....
5. JS-Kit Comments + Greybox on Any Page I realised that I didn’t want comments to be visible on the page in case one set of photos became wildly popular (yeah, right); which would result in a page of comments with a few photos, instead of a page of photos with maybe one or two comments. For some reason, Greybox popped into my head, and wouldn’t leave. A...

Tags: Programming - 编程, Rapidweaver, Tutorial - 教程