JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<a href="#helpful">Helpful</a>
<a href="#ih">IH</a>

<div class="height">

</div>

<div id="helpful">
  
</div>

<div class="height">

</div>

<div id="ih">

</div>

<div class="height">

</div>

CSS

.height {
  min-height: 500px;
}

#helpful, #ih {
  background: #eee;
  min-height: 250px;
}

JavaScript

/* Scroll zum  Anker */
(function($) {
    // Alle Fehlermeldungen zeigen, um Fehler zu beheben.
    "use strict";

    function zumAnkerScrollen() {
        let anker = ["#helpful", "#ih"];

        $.each(anker, function(index, value) {
            $("a[href=\"" + value + "\"]").on("click", function(e) {
                e.preventDefault(); // Deaktiviert die generelle Funktion des angeklickten Links
                var offset = -70; // wie viel Platz oberhalb sein soll, also die Höhe der Kopfzeile + 10 oder 20.
                if ($(value).length) {
                    $('html, body').animate({
                        scrollTop: $(value).offset().top + offset
                    }, 500); // Die Geschwindigkeit für die Animation. Hier eine Sekunde.
                }
            });
        });
    }

    // Alternative für $(document).ready({});
    $(function() {
        zumAnkerScrollen();
    });
})(jQuery);