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. 5.4
  • PHP-Version: inkl. PHP 7.xxx

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

<?php

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

Andreas Hecht

Andreas hat 2010 die SEO Agentur Hamburg gegründet und bringt kleine und mittlere Unternehmen mit laufender SEO Betreuung in die Top-10 Platzierungen bei Google. Er ist zudem Experte in WordPress Entwicklung und Performance.

Das könnte auch interessant sein...

Seobility SEO Tool

Schreibe einen Kommentar

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

Teilen
Teilen
Teilen