WordPress Snippets

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

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

Andreas Hecht

Er 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.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

Schreibe einen Kommentar

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

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen