Adding Smoothscroll to your template
04 Apr 2007 - Written by Anthony Olsen
Posted in Resources
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 ...
-
Edit the index.php file of your template to include the smooth scroll javascript. Before the closing tag paste this text:
- 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.
- Copy the smoothscroll.js file you download from the link to the directory you nominated in step 2.
- 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.
-
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.
-
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.