הוספת כפתור חזרה למעלה בוורדפרס ללא תוסף – המדריך המלא

				
					//Scroll to top

function sara_add_scroll_to_top_functionality() {
    ?>
    <style>
        #scroll-to-top {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            width: 35px;
            height: 35px;
        }

        #scroll-to-top svg {
            width: 100%;
            height: 100%;
            fill: #7780f3; /* Default icon color */
            transition: fill 0.3s ease, transform 0.3s ease;
        }

        #scroll-to-top:hover svg {
            fill: #47e7e3; /* Hover color - change as you like */
            transform: scale(1.1); /* Slight zoom on hover */
        }

        #scroll-to-top.show {
            display: block;
            opacity: 1;
        }
    </style>

    <div id="scroll-to-top">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
            <g>
                <path d="M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16,16-7.16,16-16S24.84,0,16,0ZM22.32,14.09c-.27.27-.7.27-.97,0l-4.67-4.66v14.8c0,.38-.31.69-.69.69s-.69-.31-.69-.69v-14.8l-4.66,4.66c-.27.27-.7.27-.97,0-.14-.14-.2-.31-.2-.49s.07-.35.2-.49l5.84-5.84c.12-.12.27-.19.43-.2.01,0,.03,0,.05,0,.03,0,.06,0,.09,0,.13.01.26.07.36.16.01.01.03.02.04.03l5.83,5.83c.27.27.27.7,0,.97Z"/>
            </g>
        </svg>
    </div>

    <script>
		document.addEventListener('DOMContentLoaded', function() {
			var scrollToTopButton = document.getElementById('scroll-to-top');
			var triggerPercentage = 100; // Change percentage of viewport height here (e.g., 100 = 100%)

			// Scroll to top on click
			scrollToTopButton.addEventListener('click', function(e) {
				e.preventDefault();
				window.scrollTo({ top: 0, behavior: 'smooth' });
			});

		// Show/hide button based on scroll
		window.addEventListener('scroll', function() {
			var scrollPosition = window.scrollY || window.pageYOffset;
			var viewportHeight = window.innerHeight;
			var triggerHeight = (viewportHeight * triggerPercentage) / 100;

			if (scrollPosition > triggerHeight) {
				scrollToTopButton.classList.add('show');
			} else {
				scrollToTopButton.classList.remove('show');
			}
		});
	});

    </script>
    <?php
}
add_action('wp_footer', 'sara_add_scroll_to_top_functionality');