javascript - return false/clear timeout 不是走滚动动画

Question

网站底部的最后一个 div 锁定到页面底部，不会让我在不刷新的情况下向上滚动。清除超时不起作用。

我需要更改什么才能解决此问题？

这是我的js:

function autoScrollTo(el){
    var sliderPx = document.getElementById('nav').style.top; 
    var sliderPos = sliderPx;
    var targetPos = document.getElementById(el).offsetTop;
    if(sliderPos < targetPos){
        scrollDown(el);
    } else {
        scrollUp(el)
    }
}

var scrollAmount = 0;
var distance = 38;
var speed = 16;
function  scrollDown(el){
    var offsetY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var timeLooper = setTimeout ('scrollDown(\''+el+'\')', speed);
    if(offsetY < targetY){
        scrollAmount = offsetY+distance;
        window.scroll(0, scrollAmount);
    } else {
        clearTimeout(timeLooper);   
    }
}

function  scrollUp(el){
    var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var looper = setTimeout ('scrollUp(\''+el+'\')', speed);
    if(currentY > targetY){
        scrollY = currentY-distance;
        window.scroll(0, scrollY);
    } else {
        clearTimeout(looper);   
    }
}

这是我的 HTML:

<div id="nav">
    <ul>
        <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('services');">SERVICES</a></li>
        <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('feed');">CONTACT</a></li>
    </ul>
    <div class="clearFix"></div>
</div><!--/nav-->

Answer 1

老实说，您应该重新考虑您的解决方案，使用 JQuery(动画)并更改滚动逻辑，但是我更改了一些东西，并添加了一个标志，它可以捕获您的无限滚动...只是一个快速的解决方法，但说真的，重新开始，否则你不会有一个像样的跨浏览器滚动解决方案!

function autoScrollTo(el){
    console.log(el);
    var scrollPos = document.documentElement.scrollTop;
    var targetPos = document.getElementById(el).offsetTop;

    console.log(scrollPos + "," + targetPos);
    if(scrollPos < targetPos){
        scrollDown(el);
    } else {
        scrollUp(el)
    }
}

var scrollAmount = 0;
var distance = 38;
var speed = 16;

var lastPosition;

function  scrollDown(el){
    var offsetY = document.documentElement.scrollTop;
    var targetY = document.getElementById(el).offsetTop;
    var timeLooper = setTimeout ('scrollDown(\''+el+'\')', speed);

    if(offsetY < targetY && lastPosition != offsetY){
        console.log(offsetY + "," + targetY);
        scrollAmount = offsetY+distance;
        window.scroll(0, scrollAmount);

    } else {
        console.log("end down");
        clearTimeout(timeLooper);   
    }
    lastPosition = offsetY;
}

function  scrollUp(el){
    var currentY = document.documentElement.scrollTop;
    var targetY = document.getElementById(el).offsetTop;
    var looper = setTimeout ('scrollUp(\''+el+'\')', speed);
    if(currentY > targetY && lastPosition != currentY){
        scrollY = currentY-distance;
        window.scroll(0, scrollY);
    } else {
        console.log("end up");
        clearTimeout(looper);   
    }
    lastPosition = currentY;
}