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

Question

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

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

这行代码:

var element = document.getElementById(eID);

显然返回null，这样当您尝试执行以下操作时:

var y = element.offsetTop;

您正在尝试读取 null 上的 .offsetTop 属性，这会引发异常。

发生这种情况的主要原因有两个:

1. 如果文档中没有任何元素的 ID 与 eID 参数中的内容相匹配

2. 如果您在页面的该部分完成加载之前调用它，则具有该 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;
}

<小时/>

大概解决此问题的方法是确保文档中存在 ID 值为 'abc' 的元素。