Post navigation

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

WordPress Snippets · · Keine Kommentare

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' );

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler, freier Journalist und Autor. Er schreibt für ein bekanntes deutsches Webdesign Magazin und ist nebenbei Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress.

Schreibe einen Kommentar

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