Programmieren lernen | Codebeispiele | Jobbörse | Webentwicklung

Smooth Scrolling zu jedem Anker mit jQuery.

Sanftes scrollen ist mit jQuery sehr schnell umgesetzt. Ihr benötigt nur folgendes Codebeispiel und die jQuery Bibliothek die ihr davor einbindet.

jQuery

$(document).ready(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;
          }
        }
    });    
});

Im HTML wird dann jeder Sprung zu einem Anker mit einem sanften scrollen ausgestattet.

HTML

<div id="ziel">
  Zu diesem DIV wird gescrollt
</div>
<a href="#ziel">Ankerlink</a>

Noch keine Kommentare vorhanden. Sei DU der erste!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.