MediaWiki:Gadget-goToTop.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

$(function () {
    'use strict';

    $('body').append('<span id="to-top">▲</span>');
    const $topButton = $('#to-top');

    $topButton.css({
        display: 'none',
        position: 'fixed',
        bottom: '20px', // بالاتر از لبه پایین
        right: '20px',
        width: '50px', // کمی بزرگ‌تر برای لمس راحت‌تر
        height: '50px',
        borderRadius: '50%',
        background: 'linear-gradient(135deg, #87CEFA, #4682B4)',
        color: '#fff',
        fontSize: '20px', // فونت بزرگ‌تر برای موبایل
        textAlign: 'center',
        lineHeight: '50px',
        cursor: 'pointer',
        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.2)',
        transition: 'transform 0.3s ease, background 0.3s ease',
        zIndex: 9999,
    });

    $topButton.click(function () {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $topButton.fadeIn();
        } else {
            $topButton.fadeOut();
        }
    });

    $topButton.hover(
        function () {
            $(this).css({
                transform: 'scale(1.2)',
                background: 'linear-gradient(135deg, #4682B4, #5F9EA0)',
            });
        },
        function () {
            $(this).css({
                transform: 'scale(1)',
                background: 'linear-gradient(135deg, #87CEFA, #4682B4)',
            });
        }
    );

    if ($(window).width() < 768) { // موبایل و تبلت کوچک
        $topButton.css({
            width: '40px',
            height: '40px',
            fontSize: '18px',
            lineHeight: '40px',
            bottom: '15px', // فاصله کمتر از لبه پایین
            right: '15px',
        });
    }
});