We blog on many topics around Typo3 and Java / J2EE

If a site has a lot of content, it makes sense to offer visitors an easy way to quickly scroll to the top of the page. With jQuery can be easily done that. If the position of the scroll bar is at the center of the page, the "Scroll To Top" link appears. If this link is clicked, the page is scrolled up. Then this link will be hidden again.

The script was published by Martin Carlsson and is available through the link http://appglobe.com/scroll-to-top-animation/ .

(Kopie 8)

HTML

[Translate to English:]
<body>
  <footer>
    <div>
      <a href="de/start/#page-top" id="scroll-top">Nach oben</a>
    </div>
  </footer>
</body>

(Kopie 9)

JQuery

[Translate to English:]
$(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);
}

Archive

2016 (5)

May (4)

January (1)

2015 (2)

November (1)

May (1)

2014 (1)

April (1)

2012 (3)

May (3)