Javascript 自定义滚动功能

我正在制作一个自定义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>

到底部


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




顶部

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

有什么解决办法吗

---

谢谢。

您的页面实际上不是60000像素长。当你点击“到底部”时，它实际上很快就到达了页面的末尾，但实际上它仍然是无形的动画。然后，当您单击“totop”时，它仍然会以不可见的方式显示动画，直到您达到真正的页面高度，此时它开始正常滚动。

您的页面实际上并没有60000像素长。当你点击“到底部”时，它实际上很快就到达了页面的末尾，但实际上它仍然是无形的动画。然后，当您单击“totop”时，它仍在不可见地设置动画，直到达到实际页面高度，此时它开始正常滚动。

您应该将动画设置为

$（'body'）。height（）

。目前，浏览器过于“热情”，并试图向下滚动更远（

60000

可能“足够大”，但由于页面没有那么高，它错误地计算了动画步骤）

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

也可以使用<代码>＝＝< /代码>并将其概括为（三位代码几乎完全相同）。

最后，我不知道为什么要将事情延迟1毫秒-它不明显，也没有任何意义（如果你通过等待

0

，我猜你也希望它不会等待）

---

您应该将动画设置为

$（'body'）.height（）

。目前，浏览器过于“热情”，并试图向下滚动更远（

60000

可能“足够大”，但由于页面没有那么高，它错误地计算了动画步骤）

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

也可以使用<代码>＝＝< /代码>并将其概括为（三位代码几乎完全相同）。

最后，我不知道为什么要将事情延迟1毫秒-它不明显，也没有任何意义（如果你通过等待

0

，我猜你也希望它不会等待）

---

您已经有了答案，但我想请您稍微修改一下代码，这样我就可以安睡了

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);
    }
}

---

您已经有了答案，但我想请您稍微修改一下代码，这样我就可以安睡了

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);
    }
}

---

不知道插件，但是你设置了

wait=1

仅用于滚动到顶部。是的，因为我正在查看是否是.delay（等待）。别介意。你为什么不采取一个可行的解决方案，满足你的需求，就像我认为“发明轮子”是件好事，尽管大家都这么认为。没有什么东西比轮子更经常被改造了。看看我们现在在哪里，我们的车上没有任何石轮？不过，你应该知道自己的局限性，并在已经存在的东西基础上，当它稳定并被很好地采用时。如果这个东西仍然伤害你，你可以扔掉它或根据你的需要修改它。下次只写

而不是所有那些

标签…不知道插件，但你设置

wait=1

只是为了滚动到顶部。是的，因为我看到的是.delay（wait）。别介意。你为什么不采取一个可行的解决方案，满足你的需求，就像我认为“发明轮子”是件好事，尽管大家都这么认为。没有什么东西比轮子更经常被改造了。看看我们现在在哪里，我们的车上没有任何石轮？不过，你应该知道自己的局限性，并在已经存在的东西基础上，当它稳定并被很好地采用时。如果这些东西仍然伤害你，你可以扔掉它，或者根据你的需要修改它。下次只需写

，而不是所有那些

标签。。。