Wir bloggen zu vielen Themen rund um Typo3 und Java/J2EE

Scroll To Top

Avatar of Joerg-Alexander StoehrJoerg-Alexander Stoehr - 29. Januar 2016 - Typo3 at xanders

Wenn eine Seite sehr viel Inhalt besitzt, ist es sinnvoll, den Besuchern eine einfache Möglichkeit anzubieten, schnell an den Anfang der Seite scrollen. Mit jQuery läßt sich das einfach bewerkstelligen. Wenn die Position des Scrollbars auf der Seitenmitte steht, wird der „Scroll To Top“-Link eingeblendet. Wenn dieser Link geklickt wird, wird die Seite nach oben gescrollt. Anschliessend wird dieser Link wieder ausgeblendet.

Das Script wurde von Martin Carlsson veröffentlicht und ist über den Link http://appglobe.com/scroll-to-top-animation/ verfügbar.

HTML

<body>
  <footer>
    <div>
      <a href="de/start/#page-top" id="scroll-top">Nach oben</a>
    </div>
  </footer>    
</body>

JQuery

$(document).ready(function() {
   addScrollTopAnimation(); // start
}

function addScrollTopAnimation() {   
   var $scrolltop_link = $('#scroll-top');
   $scrolltop_link.on( 'click' ,  function ( ev ) {
      ev.preventDefault();
      $( 'html, body' ).animate( {
         scrollTop: 0
      }, 700 );
   })
   // Hides the link initially
   .data('hidden', 1).hide();
   
   var scroll_event_fired = false;
   
   $(window).on('scroll', function() {
      scroll_event_fired = true;
   });
   
   /*
   Checks every 300 ms if a scroll event has been fired.
   */
   setInterval( function() {
      if( scroll_event_fired ) {
         /*
         Stop code below from being executed until the next scroll event.
         */
         scroll_event_fired = false;
         
         var is_hidden =  $scrolltop_link.data('hidden');
         
         /*
         Display the scroll top link when the page is scrolled
         down the height of half a viewport from top,  Hide it otherwise.
         */
         if ( $( this ).scrollTop() > $( this ).height() / 2 ) {
            
            if( is_hidden ) {
               
               $scrolltop_link.fadeIn(600).data('hidden', 0);
            }
         }
         else {
            if( !is_hidden ) {
               
               $scrolltop_link.slideUp().data('hidden', 1);
      
            }
         }
         
      }
      
   }, 300);
}

Archiv

2016 (5)

Mai (4) Januar (1)

2015 (2)

November (1) Mai (1)

2014 (1)

April (1)

2012 (3)

Mai (3)