An example of our "Top" bottom code on the website, which brings you back to the top!

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Your other meta tags, stylesheets, etc. -->
    <style>
        /* Scroll-to-top bar styles */
        .scroll-to-top {
            position: fixed;
            display: none;
            background-color: #FF1747;
            color: #ffffff;
            padding: 6px 10px;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.5s ease, transform 0.5s ease, top 0.5s ease; /* Added transition for top */
            display: flex;
            align-items: center;
            pointer-events: none; /* Disable click events when hidden */
        }

        .scroll-to-top.active {
            display: flex;
            opacity: 1;
            pointer-events: auto; /* Enable click events when visible */
        }

        /* Remove hover effect */
        .scroll-to-top.active:hover {
            background-color: #FF1747;
        }

        .scroll-to-top .arrow {
            width: 16px; /* Set the width and height for the new icon */
            height: 16px;
            margin-right: 4px;
        }

        .scroll-to-top .arrow svg {
            fill: #ffffff; /* Set the icon color */
        }

        .scroll-to-top .tm {
            font-size: 8px; /* Make the TM symbol smaller */
            vertical-align: super; /* Align the TM symbol to the top */
            margin-left: 0; /* Remove the margin between "Po$ted" and the TM symbol */
        }

        .scroll-to-top .profile-picture-container {
            display: flex;
            align-items: center;
        }

        .scroll-to-top .profile-picture {
            width: 32px; /* Adjust the width as needed */
            height: 32px; /* Adjust the height as needed */
            border-radius: 50%; /* Create a circular profile picture */
            margin-right: 8px; /* Adjust the spacing between the pictures and text */
            object-fit: cover; /* Preserve aspect ratio while covering the whole container */
        }

        .scroll-to-top .text {
            font-size: 14px;
            font-weight: bold;
        }

        /* Media query for smaller screens (mobile) */
        @media only screen and (max-width: 768px) {
            .scroll-to-top {
                position: fixed;
                top: 50px; /* Adjust this value to position the button on smaller screens */
                left: 50%;
                transform: translateX(-50%);
                margin-top: 20px; /* Adjust this value to move down a little on mobile */
            }
        }

        @media only screen and (min-width: 769px) {
            .scroll-to-top {
                position: fixed;
                top: -60px; /* Adjust this value to position the button on larger screens */
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <!-- Your website content -->

    <!-- Scroll-to-top bar -->
    <div class="scroll-to-top" id="scrollToTop" onclick="scrollToTop()">
        <div class="arrow">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 3.59l7.457 7.45-1.414 1.42L13 7.41V21h-2V7.41l-5.043 5.05-1.414-1.42L12 3.59z"></path>
            </svg>
        </div>
        <div class="profile-picture-container">
        </div>
        <div class="text">Top<span class="tm"></span></div> <!-- This is a hidden message. هل نحن حقيقيون حتى؟ كيف نعرف حتى؟ رائع -->
    </div>

    <script>
        // Show/hide scroll-to-top button on scroll
        window.onscroll = function () {
            showScrollToTop();
        };

        let lastScrollTop = 0; // Store the last scroll position
        let fadeOutThreshold = 400; // Set the fade-out threshold (pixels from the top)
        let fadeInThreshold = 100; // Set the fade-in threshold (pixels from the top)

        function showScrollToTop() {
            const currentUrl = window.location.href;
            if (currentUrl === 'https://www.crsocial.net/forum/create-post') {
                return; // Do not show scroll-to-top bar on this page
            }
            const scrollToTopBtn = document.getElementById('scrollToTop');
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const isScrollingUp = scrollTop < lastScrollTop; // Check if scrolling up

            if (isScrollingUp && scrollTop > fadeInThreshold) {
                scrollToTopBtn.style.top = '40px'; // Adjust this value to position the button on larger screens
                scrollToTopBtn.classList.add('active');
            } else {
                scrollToTopBtn.style.top = (scrollTop > fadeOutThreshold) ? '-60px' : '50px'; // Adjust this value to hide the button when scrolling down
                scrollToTopBtn.classList.remove('active');
            }

            lastScrollTop = scrollTop; // Update the last scroll position
        }

        // Scroll to top function
        function scrollToTop() {
            const smoothScrollOptions = {
                top: 0,
                behavior: 'smooth'
            };
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        }
    </script>
</body>

</html>
0 comments
Time for a break?

It's getting late!

An example of our "Top" bottom code on the website, which brings you back to the top!
