Question

我在这个网站上有一个导航箭头http://samverdycktest.be/marcuscatering/index-nl.html我想要旋转它，当它到达页脚时它指向顶部。然后，当点击时，它必须向前滚动。

箭头已经有了滚动效果，但我还没有弄清楚如何旋转元素并在到达某个网站的某些点时更改滚动效果。

这是de link / arrow元素：

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

Answer 1

在下面尝试此操作，如果您不使用JQuery库，我只使用JavaScript而不是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);

如何在到达页脚时旋转图像

1 个答案: