Question

我的平滑滚动功能有问题，当我尝试使用参数在我的HTML中调用它时，参数“不注册”而我的参数变量为空。

function yPosition() {
    if (self.pageYOffset) return self.pageYOffset;
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}

function elementYPosition(eID) {
    var element = document.getElementById(eID);
    var y = element.offsetTop;
    var node = element;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}

function scroll(eID) {
    var startY = yPosition();
    var stopY = elementYPosition (eID);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY);
        return;
    }
    var speed = Math.round( distance / 100 );
    if (speed >= 20) speed = 20;
    var step = Math.round( distance / 25 );
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i = startY; i < stopY; i += step) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY -= step;
            if (leapY > stopY) {
                leapY = stopY;
                timer++;
            }
        }
        return;
    }
    for ( var i = startY; i > stopY; i-= step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step;
        if ( leapY < stopY) {
            leapY = stopY;
            timer++;
        }
    }
}

相关的html：

<div id="scroll">
            <a href="#problemScroll" onclick="scroll('abc'); return false"><img src="graphics/down_arrow.png" alt="down arrow" /></a>
</div>

跑步时

控制台：

Uncaught TypeError: Cannot read property 'offsetTop' of
null elementYPosition js.js:12

@ js.js:12scroll 
@ js.js:22onclick 
@ index.html:17

Answer 1

这可能是因为没有id“abc”的元素：这就是nullelement的原因。确保你有一个（你提供的代码中没有一个）。

除此之外，代码应该有效。

Answer 2

这行代码：

var element = document.getElementById(eID);

显然正在返回null，以便当您尝试执行此操作时：

var y = element.offsetTop;

您正在尝试阅读引发异常的.offsetTop上的null属性。

这可能有两个主要原因：

如果您的文档中没有与eID参数
如果您在页面的该部分已完成加载之前调用它，那么具有该ID的元素尚不存在。

您似乎是直接通过HTML调用scroll()：

onclick="scroll('abc'); return false"

因此，它必须是文档中缺少的'abc' ID值。

仅供参考，您可以通过在代码中插入console.log()来验证这种情况：

function elementYPosition(eID) {
    var element = document.getElementById(eID);

    // insert this to check the element variable
    console.log(element);

    var y = element.offsetTop;
    var node = element;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}

据推测，解决此问题的方法是确保文档中存在'abc' ID值的元素。

Javascript：即使给出了值，参数也设置为null

2 个答案: