Add "Up / Down" buttons

Go down

Tutorial Add "Up / Down" buttons

Post 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 :
$(function(){$("body").append('<div class="updownbutton"><a href="#top"><img src="" alt="Go to top" /></a> <a href="#bottom"><img src="" alt="Go to bottom" /></a></div>')});

If you wish, replace the following images with the URL of your own images :
When finished click

Position the buttons via CSS

Administration Panel > Display > Colors > CSS Stylesheet

Add the following code :
.updownbutton {
  right:10px; /* replace right with left to display the buttons on the left */

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

When finished click and it's ready to use ! Very Happy

Ange Tuteur

Male Posts : 13217
Reputation : 2944
Language : EN, JA, FR
Location : Macungie, PA

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum