Button to top. Stiki Search

Button to top (дивись зліва внизу)

Stiki Search

Button to top

Створюємо кнопку

    <button class="toTop" >
        <svg class="svgButtonToTop" 
            xmlns="http://www.w3.org/2000/svg" 
            width="32" height="32" >
            <path d="M16 1 1 16h9v16h12V16h9z" / >
        </svg >
    </button >
                

    const refs = {
        btnTop: document.querySelector(".toTop"),
    }
    refs.btnTop.addEventListener('click', topFunction);
    
    window.onscroll = scrollFunction;
    
    function scrollFunction() {
      if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        refs.btnTop.style.display = "block";
      } else {
        refs.btnTop.style.display = "none";
      }
    };
                

Або так:

    window.onscroll = () => window.scrollY > 700 ? 
            refs.btnTop.style.display = "block" : 
            refs.btnTop.style.display = "none";

Або так:

    window.onscroll = scrollFunction;

Робимо повільний скрол

    refs.btnTop.addEventListener('click', topFunction);

    function topFunction() {
        window.scrollTo({
          top: 0,
          behavior:'smooth'
       })
     };

a

a

a

a

a

a

a

a

a