Фраза «bouton scroll en haut» на французском языке переводится как «кнопка прокрутки вверх». Кнопка прокрутки вверх – это элемент пользовательского интерфейса, который позволяет пользователям быстро вернуться к началу веб-страницы.

Вот несколько способов реализации кнопки прокрутки вверх на веб-странице, а также примеры кода:

1. HTML и CSS:

   • HTML:

     <button onclick="scrollToTop()">Scroll to Top</button>

   • CSS:

     button {
     display: none; /* Hide the button by default */
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 99;
     font-size: 16px;
     border: none;
     outline: none;
     background-color: #555;
     color: white;
     cursor: pointer;
     padding: 15px;
     border-radius: 4px;
     }

   • JavaScript:

     window.onscroll = function() {scrollFunction()};
     function scrollFunction() {
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      document.querySelector("button").style.display = "block";
     } else {
      document.querySelector("button").style.display = "none";
     }
     }
     function scrollToTop() {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
     }

2. jQuery:

   • HTML:

     <button id="scrollToTop">Scroll to Top</button>

   • JavaScript (с jQuery):

     $(document).ready(function() {
     $(window).scroll(function() {
      if ($(this).scrollTop() > 20) {
        $('#scrollToTop').fadeIn();
      } else {
        $('#scrollToTop').fadeOut();
      }
     });
     $('#scrollToTop').click(function() {
      $('html, body').animate({ scrollTop: 0 }, 'slow');
      return false;
     });
     });

3. Ванильный JavaScript:

   • HTML:

     <button id="scrollToTop">Scroll to Top</button>

   • JavaScript:

     document.getElementById("scrollToTop").addEventListener("click", function() {
     window.scrollTo({ top: 0, behavior: "smooth" });
     });
     window.addEventListener("scroll", function() {
     var scrollToTopButton = document.getElementById("scrollToTop");
     if (window.scrollY > 20) {
      scrollToTopButton.style.display = "block";
     } else {
      scrollToTopButton.style.display = "none";
     }
     });