The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add "Up / Down" buttons

2 posters

Go down

Tutorial Add "Up / Down" buttons

Post by Ange Tuteur 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 : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

Obscure likes this post

Back to top Go down

Tutorial Re: Add "Up / Down" buttons

Post by skouliki February 11th 2020, 8:24 am

This code was updated to fit in with the new HTTPS address

updated 11.02.2020 by skouliki

Female Posts : 15247
Reputation : 1703
Language : English,Greek
Location : Greece

Back to top Go down

Back to top

- Similar topics

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