• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anker pimpem (Weiches scrollen etc)

gaplex

Mitglied
Hallo,
kennt jemand Möglichkeiten (eventuell ja mit JS) den klassischen HTML-Anker ein wenig schöner zu nutzen. Ich denke da einen weichen sprung (langsames anscrollen) etc... ?
 
Werbung:
MooTools besitzt für sowas eine eigene Klasse,

bzw mit jquery:

Code:
// jQuery SmoothScroll
$('a[href*=#]').click(function() {

   // duration in ms
   var duration=1000;

   // easing values: swing | linear
   var easing='swing';

   // make sure it's the same location      
   if(location.pathname.replace(/^\//,'')==this.pathname.replace(/^\//,'') && location.hostname==this.hostname && this.hash.replace(/#/,''))
   {
      // get parameters
      var hash=this.hash;
      var target=$(hash).offset().top;

      // animate to target and set the hash to the window.location after the animation
      $("html:not(:animated),body:not(:animated)").animate({ scrollTop: target }, duration, easing, function() { 
         // add ankor to the browserlocation
         location.pathname=location.pathname+hash; 
      });

      // cancel default click action
      return false;
   }

});
 
Werbung:
Neuer Versuch einer Antwort (wenn auch schon etwas älter, doch Google vergisst ja nie...):

location.pathname=location.pathname+hash;

sollte ersetzt werden durch:

location.href = location.pathname + location.search + hash;

-> damit bleiben mögliche GET-Parameter erhalten
 
Zurück
Oben