[JavaScript] detect down/up scrolling - Le Hollandais Volant
dimanche 28 février 2016 à 19:54La version complète du coup :
HTML :
JS :
CSS :
FILE (icon_top.png file) :
— (permalink)
HTML :
<div id="scr" class="scrollbutton"><a href="http://lehollandaisvolant.net/#" onclick="event.preventDefault(); window.scroll(0, targetOffset);"></a></div>
JS :
// FastScroll // Initial state var scrollPos = 0; var targetOffset = 0; var scr = document.getElementById('scr'); // adding scroll event window.addEventListener('scroll', function(){ scrolling() }); // the function : compares the "new" scrolling state with the previous // (this allows detecting either "up" or "down" scrolling) // then saves the new in the $previous for the next iteration. function scrolling() { if ((document.body.getBoundingClientRect()).top > scrollPos) { scr.classList.add('scrollbutton-top'); targetOffset = 0; } else { scr.classList.remove('scrollbutton-top'); targetOffset = 100000; } if ((document.body.getBoundingClientRect()).top > -500) { scr.classList.remove('scrollbutton-on'); } else { scr.classList.add('scrollbutton-on'); } scrollPos = (document.body.getBoundingClientRect()).top; }
CSS :
/* Fast Scroll button -----------------------------------*/ #scr { background: url(icon_top.png) no-repeat center center; opacity: 0; width: 0px; height: 80px; position: fixed; z-index: 99; bottom: 0; right: 0; transition: opacity .5s linear, width 0s .6s linear; overflow: hidden; } #scr.scrollbutton-on { opacity: .3; width: 80px; transition: opacity .5s linear, width 0s linear; } #scr.scrollbutton-top { transform: rotate(180deg) } #scr a { width: 80px; height: 80px; position: fixed; }
FILE (icon_top.png file) :
http://lehollandaisvolant.net/img/icon_top.png
— (permalink)