This is a quick tip on how to add the smoothscroll javascript functionality to your site. Smoothscroll is a really neat relatively unobtrusive javascript that gives the effect of scrolling between anchor points within your web page. We like the ffect because it gives the reader/visitor a more organic, dare we say “interactive”, feel and delivers a more engaging surfing experience.

First of all you need the javascript ...

1. Edit the index.php file of your template to include the smooth scroll javascript. Before the closing tag paste this text:

2. You can edit the pathway to the javascript to suit your needs but for the sake of keeping a tidy house we prefer to use the “js” folder to store all of the javascripts.
3. Copy the smoothscroll.js file you download from the link to the directory you nominated in step 2.
4. We've automatically placed an anchor at the top of the template so all you need to do now is create a link to it. We recommend using the advanced link plug in for the wysiwyg editor JCE - it makes this sort of thing really easy.

5. Click on the paperclip symbol on the editor normally used to create a hyperlink. Navigate to the drop down list that says insert anchor (just below the url option) and choose the anchor point you want to scroll to.

6. Clickl apply or save.

   Thats all you need to do in order to have all anchor links within your content scroll to the anchor rather than jumping to it.

   A more detailed tutorial can be found here.

blog comments powered by Disqus