Post navigation

Scroll.js – flüssig Scrollen von Anker zu Anker ohne Plugin

Die typischen Scroll-Animationen sind sehr beliebt. Doch oftmals gibt es sie nur in völlig überfrachteter Version mit hunderten von Einstellmöglichkeiten. Hier bekommst Du ein Script, dass Du nicht einmal konfigurieren musst, und das nur 20 Zeilen Code umfasst.

Definiere einfach Deine Anker (Links) im HTML, und schon scrollt das Script flüssig dorthin und auch wieder zurück.

Der nötige Link und der Anker sehen so aus:

<a href="#dein-anker">Scrolle herunter zum Anker</a>

<h2 id="dein-anker">Ein Klick auf den Link oben scrollt zu dieser Überschrift</h2>

Die Voraussetzung für die Funktion ist jQuery, welches allerdings bereits serienmäßig in allen WordPress-Installationen zu finden ist.

Der Code

  • WordPress Version: inkl. 4.6
  • PHP-Version: inkl. PHP 7

Kopiere den folgenden Code in deine functions.php des aktiven Themes hinein:

<?php

// Ab hier kopieren
function tb_smooth_scroll() {
?>
	<script>
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
</script>
<?php }
add_action('wp_footer', 'tb_smooth_scroll' );

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.