User:Kwj2772/goTopIcon.js
Jump to navigation
Jump to search
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
 |
Documentation for this user script can be added at User:Kwj2772/goTopIcon. |
/* scrollUp Button
* Add a button to scroll up to the top of the current page.
* @rev 2 (2018-10-03)
* @author Kwj2772
* No internationalisation required
* <nowiki>
*/
/* global jQuery:false */
(function scrollUpButton ($) {
'use strict';
var $icon = $('<img>').prop({
'src': '//upload.wikimedia.org/wikipedia/commons/thumb/5/59/Font_Awesome_5_regular_arrow-circle-up_blue.svg/32px-Font_Awesome_5_regular_arrow-circle-up_blue.svg.png',
'id': 'scrollUpButton'
});
$icon.appendTo('body');
$icon.css({
'position': 'fixed',
'bottom': '24px',
'right': '18px',
'opacity': '0.75',
'display': 'none'
});
$(window).scroll(function() {
var scrollValue = $(window).scrollTop();
if (scrollValue === 0) {
$icon.fadeOut('slow'); // fade out if you reach the top of the page
} else {
$icon.fadeIn('slow');
}
/* When you hover mouse over the button */
$icon.hover(function() {
if (scrollValue !== 0) {
$(this).css('opacity',1);
}
},function() {
if (scrollValue !== 0) {
$(this).css('opacity',0.75);
}
});
});
$icon.click(function() { // Move to the top of the page
$('html,body').animate({
scrollTop:0
},850);
});
})(jQuery);
// </nowiki>