javascript - How to rotate an image when reaching the footer -

i have navigation arrow on website http://samverdycktest.be/marcuscatering/index-nl.html want rotate points top when reached footer. , ofcourse has scroll upfront when clicked on.

the arrow has scrolling effect on it, didn't figure out yet how rotate elements , change scrolling effect when reaching points @ website.

this de link/arrow element:

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

try below, have used javascript instead of jquery in case not using jquery library.

jsfiddle

html

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

js

// function detect when scroollbar reaches 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 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) {         // keep track of element's scrolltop         // supposed be, based on we're doing         var previous_top = element.scrolltop;          // think function game loop         var scroll_frame = function() {             if(element.scrolltop != previous_top) {                 reject("interrupted");                 return;             }              // set scrolltop frame             var = 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 supposed scroll didn't,             // hit limit, consider done; not             // interrupted.             if(element.scrolltop === previous_top                 && element.scrolltop !== frametop) {                 resolve();                 return;             }             previous_top = element.scrolltop;              // schedule next frame execution             settimeout(scroll_frame, 0);         }          // boostrap 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);