Daschmi's Notizblog

Hauptmenü

Werkzeuge

Kategorien

Archiv

Tineco nass und trockensauger Einhell Shelly H&T Gen3 Liste von RTSP URLs für gängige Kameras Freischneider Test 2026 Test Wärmepumpentrockner 2026 USB Adapter Vergleich Ladekabel Kaffeemaschinen Vergleich Ladekabel Staubsauger Vergleich Ladekabel Mammotion YUKA mini 2 1000 im Test: Mähroboter ganz ohne Begrenzungsdraht lubluelu CHYW201 im Test: Fensterputzroboter ganz ohne Netzkabel Einhell GP-LB 36/210: Der Power-X-Change-Laubbläser im Test

Weiter Anker Scroll mit VanillaJS

Erstellt in Javascript am 30. Juli 2021 vom Daschmi

Mit folgenden Vanilla JS Code Schnipsel scrollen die Anker Links smart zu den Zielen.

for (let element of document.querySelectorAll('a[href^="#"]')) {
        
    element.addEventListener('click', (event) => {
        
        event.preventDefault();
        
        let hash = element.getAttribute('href');
        let target = document.getElementById(hash.substr(1));
        
        if (target !== null) {
        
            let rect = target.getBoundingClientRect();
            let top = (window.pageYOffset || document.documentElement.scrollTop) + rect.top;
                
            let offset = 92;
            
            window.scrollTo({
                top: top - offset,
                behavior: "smooth"
            });

        }
        
    });
    
}

Verwandte Artikel