FANDOM


BackToTopButton adds a button to the right corner of the page (in the modern version) or the toolbar (in the old version) that takes you back to the top of the page when pressed.

Installation

Customization

If you want to adjust the speed of the scroll up or the amount of scroll down you have to do for the button to appear and a bunch of other options, add the following lines before importing the script (for global.js) or to your community's Wikia.js page.

Modernization

The button has two variants, a modern one and the old one. The old one is shown by default, but if you want to enable the modern behaviour you can use:

window.BackToTopModern = true;

Arrow icon

If you want to use the old variant of the button but display an arrow instead of a button, you can use:

window.BackToTopArrow = true;

Button Text

The button text will be automatically shown in the user's language. However, if you wish to change the text, you can do so with the following.

window.BackToTopText = "new text";

Scroll Speed

To adjust scroll speed add this:

window.BackToTopSpeed = number;

Where number is the scroll time, in milliseconds. Higher numbers result in slower scrolling and smaller numbers result in faster scrolling. Default value is 600.

Button Appearance

To adjust the "depth" you have to reach for the button to appear/disappear add this:

window.BackToTopStart = number;

Where number is distance down the page, in pixels, before the button appears. Higher numbers will make you scroll down further before the button appears. Default value is 800.

Button Format

You can also format the button any way you like with CSS. For example:

/* Back-to-top Button Format */
#BackToTopBtn div {
    opacity: 0.7;
    transition: .5s;
}
#BackToTopBtn div:hover {
    opacity: 1;
}

The above CSS rules will make the button semi-transparent until hovered. This works only on the modern variant of the button.

/* Back-to-top Button Format */
#backtotop button{
    background: none;
    background-color: transparent;
    color: white;
    border: none;
}
#backtotop button:hover {
    text-decoration: underline;
}

The above CSS rules will make the button look like a simple link. This works only on the old variant of the button.

Disable Button's Fade In/Out Effect

To disable the fade effect add this:

window.BackToTopFade = 0;

To re-enable the effect simply remove this line from your JS page. The fade in/out effect for the button is enabled by default.