Footer, der per Klick nach oben scrollt

Genaugenommen scrollt nicht der Footer nach oben, sondern der Body nach unten. Der Effekt ist jedenfalls hübsch: am unteren Browserfenster klebt ein Link, eine „Footerlippe“, die bei Klick den Footer ins Bild schiebt.

Um das zu erreichen benötigt man das jQuery Plugin „ScrollToFixed„.

Durch folgenden Code wird nach dem Einbinden des Plugins der Footer am unteren Browserrand fixiert:

jQuery(function($) {	
// benoetigt jQuery ScrollToFixed Plugin
   $('#footer').scrollToFixed( {
      bottom: 0,
      limit: $('#footer').offset().top
   });	
});

Will man nun noch den Effekt, dass bei Klick auf die „Lippe“ der Footer innerhalb von 600 Millisekunden ins Bild gezogen wird, so schreibt man folgendes:

jQuery(function($) {	
// benoetigt jQuery ScrollToFixed Plugin
   $('#footer').scrollToFixed( {
      bottom: 0,
      limit: $('#footer').offset().top
   });
// Zum Footer springen bei Klick	
   $('#footer').find('a').click(function(){
      $("body").animate({
         scrollTop:$('body').outerHeight() - $(window).height()
      }, 600);
   })	
});

Demo