03.04.2012

Seitenscrolleffekt mit einfachen Mitteln auf Basis von jQuery

von Sven Schwarz

Mittels jQuery lässt sich auf überlangen Webseiten mit einfachsten Mitteln ein ansprechender Seitenscrolleffekt einbauen.

Dazu genügt es innerhalb des Textes HTML Anker zu setzen und an beliebigen Stellen im Dokument zu verlinken.

Im Header der Seite wird nun via

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" 
type="text/javascript"></script>

die jQuery Bibliothek eingebunden.

Nun genügt es im Head-Bereich noch das folgende Script zu platzieren welches dafür sorgt, dass beim Anklicken eines Anker-Links nicht mehr in einem Ruck zum entsprechenden Anker gesprungen wird, sondern der Browser butterweich an die entsprechende Stelle scrollt.

<script type="text/javascript">
    $(function(){
      $('a[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) {
             var targetOffset = $target.offset().top;
             $('html,body').animate({scrollTop: targetOffset}, 500);
             return false;
         }
        }
      });
    });
</script>

Demo | Live auf www.schaffhausen.ch

Meier + Cie AG
SOBAG
Vordergasse 58
8201 Schaffhausen

Tel. +41 52 633 35 55
E-Mail: infosobagch

Unsere Portale:

nordagenda.ch schaffhausen.ch