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.

Add "Up / Down" buttons 09615172706Create 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 Add "Up / Down" buttons Submit10

Add "Up / Down" buttons 09615172706Position 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 Add "Up / Down" buttons Submit10 and it's ready to use ! Very Happy

Ange Tuteur
Ange Tuteur

Male Posts : 13223
Reputation : 2961
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