Add "Up / Down" buttons

by Ange Tuteur on June 16th 2014, 11:38 am

Add "Up / Down" buttons

This tutorial will allow you to add two buttons which return you to the top or bottom of the page on all pages of your forum.

Create the JavaScript

Administration Panel > Modules > JavaScript codes management

Choose "Create a new JavaScript", give it a title, and tick "in all the pages".

Add the following code :

Code:: $(function(){$("body").append('<div class="updownbutton"><a href="#top"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Go to top" /></a> <a href="#bottom"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_d10.png" alt="Go to bottom" /></a></div>')});

If you wish, replace the following images with the URL of your own images :
- https://i.servimg.com/u/f42/09/02/12/09/sort_u10.png
- https://i.servimg.com/u/f42/09/02/12/09/sort_d10.png
When finished click

Position the buttons via CSS

Administration Panel > Display > Colors > CSS Stylesheet

Add the following code :

Code:: .updownbutton { position:fixed; bottom:40px; right:10px; /* replace right with left to display the buttons on the left */ z-index:100; }

If you want the buttons to remain transparent and light up on hover, add the following code after the one above :

Code:: .updownbutton img { filter:alpha(opacity=50); -khtml-opacity:0.5; -moz-opacity:0.5; opacity:0.5; } .updownbutton img:hover { filter:alpha(opacity=100); -khtml-opacity:1; -moz-opacity:1; opacity:1; }

When finished click

and it's ready to use ! Very Happy