Bardzo szybki JS - scrollTo, scrollIntoView

Nauczymy się robić kotwice do elementów na stronie WWW przy pomocy tagu <a> oraz odpowiedniego ID, następnie zajmiemy się bardziej płynnym scrollowaniem z poziomu JavaScript, wykorzystując funkcje scrollTo oraz scrollIntoView.

Nasza templata – dużo lorem ipsum

Zakładam, że wiemy, co to lorem ipsum i jaki jest jego cel. Oto nasza templatka pliku html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <h1>Heading one</h1>
    <h3>Table of contents:</h3>
    <ul>
        <li><a href="">Heading Two</a></li>
        <li><a href="">Heading Three</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
   <h2 id="heading-two">Heading two</h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <h2 id="heading-three">Heading three</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <button id="upBtn">Go to up!</button>
    
</body>
</html>

Mamy <h1>, potem spis treści (<ul> zawierający <li> oraz <a>), następnie 2 tagi <h2> z własnym id oraz dużo „lorem ipsum” pomiędzy nimi. Mamy też na samym dole <button>, który ma nam przewijać na samą górę.

Templatkę kopiujemy do jakiegoś pliku html. Następnie doklejamy jeszcze skrypty przed zamknięciem tagu body:

<script>
        window.addEventListener("DOMContentLoaded", function(){
            console.log("DOM fully loaded");
        });
</script>
</body>
</html>

Jesteśmy gotowi.

Kotwice HTML – stare podejście

Zabierzmy się za nasze kotwice. Zauważmy, że nasze nagłówki <h2> posiadają swoje id:

<h2 id="heading-two">Heading two</h2>
(...)
<h2 id="heading-three">Heading three</h2>

Nasz spis treści natomiast posiada pusty atrybut href:

 <ul>
    <li><a href="">Heading Two</a></li>
    <li><a href="">Heading Three</a></li>
 </ul>

Pusty atrybut href można osiągnąć też tak:

 <ul>
    <li><a href="#">Heading Two</a></li>
    <li><a href="#">Heading Three</a></li>
 </ul>

Takie linki nigdzie nas nie przenoszą. Natomiast mogą przenieść nas na jakieś miejsce na stronie. Wystarczy po haszu podać prawidłowe ID:

 <ul>
    <li><a href="#heading-two">Heading Two</a></li>
    <li><a href="#heading-three">Heading Three</a></li>
 </ul>

Teraz będziemy mieli nagły „przeskok” do konkretnego miejsca. Jeżeli wygląda on dobrze, to znaczy, że mamy za mało lorem ipsum. Dajmy więcej a zobaczymy, jak bardzo źle takie przeskoki wyglądają (ale działa).

Zajmiemy się tym w następnej sekcji.

Funkcja scrollIntoView, smooth scrolling – nowe podejście

Nadajmy ID jednemu z naszych linków:

<li><a href="#heading-three" id="a-heading-three">Heading Three</a></li>

Teraz złapmy go w JavaScript:

<script>
 window.addEventListener("DOMContentLoaded", function(){
    let anchorHeadingThree = document.querySelector("#a-heading-three");
 });
</script>

Dodajemy na 'click’ event listenera, który przyjmuje event i zapobiega domyślnemu działaniu (jakim jest natychmiastowe przejście do tamtego elementu):

let anchorHeadingThree = document.querySelector("#a-heading-three");
anchorHeadingThree.addEventListener('click', function(e){
   e.preventDefault();
});

Teraz po wciśnięciu (drugiego) linku nic się nie stanie. Możemy teraz wylogować wartość atrybutu href:

let anchorHeadingThree = document.querySelector("#a-heading-three");
anchorHeadingThree.addEventListener('click', function(e){
   e.preventDefault();
   console.log(this.getAttribute('href'));
});

Dostajemy:

#heading-three

Mamy zatem selektor elementu, do którego chcemy scrollować. Teraz wystarczy użyć funkcji scrollIntoView

let anchorHeadingThree = document.querySelector("#a-heading-three");
anchorHeadingThree.addEventListener('click', function(e){
   e.preventDefault();
   let selector = this.getAttribute('href');
   document.querySelector(selector).scrollIntoView({ behavior: "smooth"});
});

Mamy teraz płynne przejście.

Płynne przejście na wszystkich linkach kotwicowych – skrypt

Jeżeli chcemy automatycznie nadać takie zachowanie wszystkim elementom <a> będącym linkiem do kotwicy na naszej stronie, przyda nam się taki skrypt:

window.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
    
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});

Tutaj bierzemy wszystkie elementy <a>, których href zaczyna się od znaku „#” (linki kotwicowe). Przechodzimy po nich pętlą forEach. Każdemu nadajemy event-listener, który usuwa domyślne zachowanie po kliknięciu, zamiast tego wyszukuje element z ich atrybutu href i płynnie scrolluje do tego elementu.

Scroll do góry strony – funkcja scrollTo

Mamy jeszcze nasz guzik:

<button id="upBtn">Go to up!</button>

Łapiemy go w naszym skrypcie:

window.addEventListener('DOMContentLoaded', function(){
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
let upBtn = document.querySelector("#upBtn");            
});

Dodajemy eventListener:

upBtn.addEventListener('click', function(){
  scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth",
      });
});

I to wszystko. Po wciśnięciu płynnie scrolluje do samej góry strony.

Bardzo szybki JS – scrollTo, scrollIntoView

Nasza templata – dużo lorem ipsum

Kotwice HTML – stare podejście

Funkcja scrollIntoView, smooth scrolling – nowe podejście

Płynne przejście na wszystkich linkach kotwicowych – skrypt

Scroll do góry strony – funkcja scrollTo