Question

我知道已经有几个帖子在谈论这个问题了，我已经尝试了所有这些，但它们似乎都不适合我。我只想要一个简单的javascript动画，所以当我按下toTop按钮（它是固定的页脚）时，我必须转到我的页面顶部（我的标题/导航也是固定的）。

一般来说，我的javascript现在什么都不做，因为我的scrollTop属性在我的按钮上返回0 。有谁知道如何处理这个问题？

这是我的代码：

var btn = document.getElementById("scrollToTop");

btn.addEventListener("click", function () { ScrollToTop(btn) });

function ScrollToTop(btn){
    scrollTo(btn, 0, 50)
}

function scrollTo(element, to, duration) {

    //scollTop means:
    //the amount of pixels to scroll (left or top)
    //from the element his content

    //ele.scrollTop = 10 --> scroll TO 10 pixels
    //ele.scrollTop += 10 --> scroll 10 pixels up

    //var a = ele.scrollTop --> you should get the vertical scroll value

    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;

    //problem is here that my btn (that is fixed, has a scrollTop value of zero
    //by that he would'nt scroll

    console.log(start);
    console.log(change);
    console.log(currentTime);
    console.log(increment);

    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

已经感谢你的阅读，问候，一个学生在一周内有太多该死的截止日期和决赛

仅在具有固定位置的元素上使用javascript的scrollTop动画（底部）

0 个答案: