Bootstrap 4 – Online-Kurs (Komplettkurs)

0 von 42 Lektionen abgeschlossen (0 %)

Bootstrap und jQuery

Local Scroll mit eigenem jQuery-Script

Dies ist eine Vorschau-Lektion

Kaufe diesen Kurs oder melde dich an, wenn du bereits registriert bist, um an dieser Lektion teilzunehmen.

Ein schön animierter Local Scroll oder Ankersprung ist typisch für das moderne Web. In diesem Video zeige ich dir, wie ein entsprechendes Script auf jQuery-Basis entwickelt wird.

Hier findest du noch einmal den kompletten Code für den local scroll mit jQuery. Vergiss nicht, dass für die Animation die komplette jQuery Version verwendest und nicht nur die Slim-Version.

$( document ).ready(function() {
    
    $('.local-scroll').on('click', function(e){
        e.preventDefault();

        var href = $(this).attr('href');

        var offsetTop = $( href ).offset().top;

        if( href == '#unser-programm' ) {
            offsetTop = offsetTop - 150;
        }

        $('html, body').animate({
            scrollTop: offsetTop
        }, 'slow');
    });
});