Skip to main content Skip to page footer

Animiertes scrollen per JavaScript

Bei klick auf einen internen Anker-Link wird nicht direkt zum Link gesprungen, sondern sanft dorthin gescrollt.

document.addEventListener("DOMContentLoaded", function() {
  const links = document.querySelectorAll('a[href*="#"]');
  links.forEach(function(link) {
    link.addEventListener("click", function(event) {
      event.preventDefault();
      const targetId = this.getAttribute("href").substring(1); // Entferne das '#' Zeichen
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        const targetOffsetTop = targetElement.getBoundingClientRect().top + window.scrollY;
        window.scrollTo({
          top: targetOffsetTop,
          behavior: "smooth"
        });
        // Füge den Hash zur URL hinzu
        history.pushState({}, "", "#" + targetId);
      }
    });
  });
});