Question

我正在制作自定义scrollTo（）函数。我的职责是：

function scrollTo(wait, scroll, time) {
    if (scroll == 'top' || scroll == 'Top') {
        if (wait == 0) {
            wait = 1;
        }
        $('html, body').delay(wait).animate({
            scrollTop: 0
        }, time);
    }
    else if (scroll === 'bottom' || scroll == 'Bottom') {
        time = time + 6000;
        $('html, body').delay(wait).animate({
            scrollTop: 60000
        }, time);
    }
    else {
        $('html, body').delay(wait).animate({
            scrollTop: scroll
        }, time);
    }
}

使用我刚刚使用的HTML非常快：

  <div onclick="scrollTo(0, 'Bottom', 1500);">To Bottom</div>

        <br><br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>
        br<br>br<br>br<br>br<br>br<br>
        br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br
        <br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>
        <br><br><br><br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>
        br<br>br<br>br<br>br<br>br<br>
        br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br
        <br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>br<br>
        <br><br>

   <div onclick="scrollTo(0, 'Top', 1500);">Top</div>

问题： 当我点击到底部时，它会向下滚动，但是当我点击顶部时，它会在上升之前延迟很长时间。我不知道为什么。

任何解决方案？

感谢。

Answer 1

您的页面实际上不是60000像素长。单击“To Bottom”时，它实际上很快到达页面的末尾，但它仍然是无形的动画。然后当你单击“To Top”时它仍然是无形的动画，直到你达到真正的页面高度，此时它开始正常滚动。

Answer 2

你应该动画到$('body').height()。目前浏览器过于“狂热”并试图进一步向下滚动（60000可能“足够大”但它会错误地计算动画步骤，因为页面不是很高）。

另外，向下滚动时你会增加6秒 - 这会使下一次点击等待额外的时间，因为有一个动画队列按照添加动画的顺序执行动画。

另外，使用===并考虑将其全部推广（你有三位代码几乎完全相同）。

最后，我不知道为什么要延迟1毫秒的事情 - 它不明显而且没有任何意义（如果你通过0等待，我猜你也期望它不要等）。

http://jsfiddle.net/67RBH/2/

function scrollTo(wait, scroll, time) {
    var amount = scroll.toLowerCase(),
        pixels = amount === "top"    ? 0                  :
                 amount === "bottom" ? $('body').height() :
                 scroll;

    $('html, body').delay(wait).animate({
        scrollTop: pixels
    }, time);
}

Answer 3

你已经有了答案，但我想请你稍微修改一下代码，这样我就能安然入睡。

function scrollTo(wait, scroll, time) {
    var animatedScroll = function (lag, pixels, timeSpan) {
        $('html, body').delay(lag).animate({
            scrollTop: pixels
        }, timeSpan);
    },
        scrollCmd = scroll.toLowerCase();

    switch (scrollCmd) {
    case 'top':
        animatedScroll(wait === 0 ? 1 : wait, 0, time);
        break;
    case 'bottom':
        animatedScroll(wait, 60000, time + 6000);
        break;
    default:
        animatedScroll(wait, scroll, time);
    }
}

自定义scrollTo功能

3 个答案: