javascript - 到达页脚时如何旋转图像

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

试试下面这个，我只使用 JavaScript 而不是 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);