바닥 글에 도달했을 때 이미지를 회전하는 방법

Question

이 웹 사이트에 내비게이션 화살표가 있습니다. http://samverdycktest.be/marcuscatering/index-nl.html 회전하고 싶은 곳으로, 바닥 글에 도달했을 때 위쪽을 가리 킵니다. 그리고 클릭하면 앞쪽으로 스크롤해야합니다.

화살표는 이미 스크롤 효과가 있지만, 웹 사이트에서 특정 지점에 도달하면 요소를 회전하고 스크롤 효과를 변경하는 방법을 아직 알지 못했습니다.

이 드 링크/화살표 요소 :

<a href="footer" class="to-the-bottom"> 
    <i class="fa fa-arrow-circle-o-bottom"></i> 
</a> 

Answer 1

아래이보십시오, 나는 당신이 jQuery 라이브러리를 사용하지 않는 경우 그냥 자바 스크립트 대신 JQuery와 사용하고 있습니다.

JSFiddle

HTML

<i id="icon" class="fa fa-arrow-circle-o-bottom"></i> 

JS

// function to detect when scroollbar reaches the bottom of page 
var whenScrlBottom = function() { 
    // http://coursesweb.net/javascript/ 
    var win_h = (self.innerHeight) ? self.innerHeight : document.body.clientHeight; // gets window height 

    // gets current vertical scrollbar position 
    var scrl_pos = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 

    // if scrollbar reaces to bottom 
    if (document.body.scrollHeight <= (scrl_pos + win_h)) { 
    //alert('Bottom'); 
    var d = document.getElementById("icon"); 
    d.className = d.className + " rotated"; 
    } 

    else { 
     var e = document.getElementById("icon"); 
     e.className = "fa fa-arrow-circle-o-bottom";   
    } 
} 


// register event on scrollbar 
window.onscroll = whenScrlBottom; 


var smooth_scroll_to = function(element, target, duration) { 
    target = Math.round(target); 
    duration = Math.round(duration); 
    if (duration < 0) { 
     return Promise.reject("bad duration"); 
    } 
    if (duration === 0) { 
     element.scrollTop = target; 
     return Promise.resolve(); 
    } 

    var start_time = Date.now(); 
    var end_time = start_time + duration; 

    var start_top = element.scrollTop; 
    var distance = target - start_top; 

    // based on http://en.wikipedia.org/wiki/Smoothstep 
    var smooth_step = function(start, end, point) { 
     if(point <= start) { return 0; } 
     if(point >= end) { return 1; } 
     var x = (point - start)/(end - start); // interpolation 
     return x*x*(3 - 2*x); 
    } 

    return new Promise(function(resolve, reject) { 
     // This is to keep track of where the element's scrollTop is 
     // supposed to be, based on what we're doing 
     var previous_top = element.scrollTop; 

     // This is like a think function from a game loop 
     var scroll_frame = function() { 
      if(element.scrollTop != previous_top) { 
       reject("interrupted"); 
       return; 
      } 

      // set the scrollTop for this frame 
      var now = Date.now(); 
      var point = smooth_step(start_time, end_time, now); 
      var frameTop = Math.round(start_top + (distance * point)); 
      element.scrollTop = frameTop; 

      // check if we're done! 
      if(now >= end_time) { 
       resolve(); 
       return; 
      } 

      // If we were supposed to scroll but didn't, then we 
      // probably hit the limit, so consider it done; not 
      // interrupted. 
      if(element.scrollTop === previous_top 
       && element.scrollTop !== frameTop) { 
       resolve(); 
       return; 
      } 
      previous_top = element.scrollTop; 

      // schedule next frame for execution 
      setTimeout(scroll_frame, 0); 
     } 

     // boostrap the animation process 
     setTimeout(scroll_frame, 0); 
    }); 
} 

function scroll_up() { 
    var el = document.querySelector('body'); 
    smooth_scroll_to(el, el.scrollTop - 2000, 600); 
} 

var myEl = document.getElementById("icon"); 

myEl.addEventListener('click', function() { 
    scroll_up(); 
}, false);