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 MediaWiki:Common.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 behavior 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;
Using configuration options with Fandom Developers Wiki scripts
The instructions on this page describe how to use configuration options with a script. Here on the Fandom Developers Wiki, many scripts provide optional configuration settings as a mean to alter or enhance the default behavior of the script. When installing configuration options in your JavaScript file, please note that they need to go above the import statement in order to work — unless the directions say otherwise. In case MediaWiki:ImportJS is used to load the scripts, it will be executed last.
// 1. AjaxRC import statement
importArticles({
type: 'script',
articles: [
'u:dev:MediaWiki:AjaxRC.js'
]
});
// 2. AjaxRC configuration option
window.ajaxRefresh = 30000;
// 1. AjaxRC configuration option
window.ajaxRefresh = 30000;
// 2. AjaxRC import statement
importArticles({
type: 'script',
articles: [
'u:dev:MediaWiki:AjaxRC.js'
]
});
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.