2


我想使用以下脚本在我的网站上为平滑的身体滚动制作动画：

function autoScroll(el) {
    var scrollY = 0;
    var distance = 2;
    var speed = 10;

    var scrolling = function(){
        var currentY = window.pageYOffset;
        var targetY = document.getElementById(el).offsetTop;
        var bodyHeight = document.body.offsetHeight;
        var yPos = currentY + window.innerHeight;
        var animator = setInterval('autoScroll(\''+el+'\')', speed)
        interval = animator;

        if (yPos > bodyHeight){
            clearInterval(animator);
        }else{
            if (currentY < targetY - distance){
                scrollY = currentY + distance;
                window.scrollTo(0, scrollY);
            }else if (currentY > targetY + distance){
                scrollY = currentY - distance;
                window.scrollTo(0, scrollY);
            }else{
                clearInterval(animator);
            }
        }
    }
    return scrolling();
}

脚本运行，但行为不端。当我第一次单击菜单时，它很好地滚动到正确的位置，然后滚动停止。但是当我第二次单击菜单时，脚本永远不会停止滚动，它会尝试同时以类似随机的方式在两个方向上滚动。奇怪的是，当我使用 setTimeout() 和 clearTimeout() 函数而不是 setInterval() 和cleatIntervaw 时，该函数工作得很好。它必须是 setInterval() 的原因是因为动画比我使用 setTimeout() 时快得多。有人可以向我解释为什么会发生这种异常以及如何解决它吗？
感谢
Jared

更新
这是我用来滚动的 html 标记：

<a href="#" class="scroll" onclick="return false;" onmousedown="autoScroll('location');"><div class="tableLink">Location</div></a>
...
<div id="location" class="page">location</div>
4

2 回答 2

0

调用函数时可能需要清除间隔？

function autoScroll(el) {
    if (window.interval) window.clearInterval(interval);
于 2013-05-07T12:24:08.540 回答
0

我看起来你做了一个比必要的更复杂的解决方案。每个间隔创建一个新函数然后返回的事实看起来有点奇怪。

您可以将问题分为两部分：

  1. 首先设置一个目标元素。
  2. 然后使用 setInterval 启动一次循环（仅当它尚未运行时），将页面向目标滚​​动，直到到达目标（即使目标在循环中间发生变化，也可以编写代码来工作）。

此外，为了获得最流畅的体验，您应该考虑使用 requestAnimationFrame 而不是 setInterval。

最后，如果你不介意使用 jQuery，有很多插件已经提供了这个功能，例如http://demos.flesler.com/jquery/scrollTo/。这可能值得一试。

于 2013-05-07T12:37:39.047 回答