Question

这是我的代码：

使用Javascript：

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

HTML标记：

<button id="UP" onclick="toTop(350);"></button>

CSS样式：

#UP {display: none;}

我的想法是当我向下滚动时，然后会出现UP按钮。但是不知道为什么，它不会，它甚至会返回错误：“未捕获的TypeError：无法设置属性'document.body'of null”。当然，我确实改变了这样的其他剧本：

function getReady() {
    UP();
}
function UP() {//Ẩn hiện nút UP
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}

HTML标记：

<body onload="getReady();">
    <button id="UP" onclick="toTop(350);"></button>
</body>

它更加可怕。当我加载网站时，我没有看到body标签的onload attr，浏览器没有为我返回任何错误。

其他一些信息：我双方都在发展，Cr＆amp; FF，这一切都说同样的问题。我正在使用Wordpress源代码。

Answer 1

为了澄清@laruiss并解释发生了什么，让我们从你的代码开始：

/* body.onload is not recommended, window.onload is. But thats not the main issue*/
window.onload = function() {
    /* You are declaring a function here. Very important: 
     * its a declaration, NOT a function call 
     */
    function UP() {
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
    /* So if you want to execute ('call') your function, you have two options:
     * - Remove the declaration around your function aka `function UP(){` and the ending `}`
     * - Call the function here. To make your code work instantly, lets do that.
     */
    UP();
}

使用onload事件时，实际上是在做正确的事情。没错，它不是推荐来实际在你的DOM中做到这一点，但它应该工作。 DOM负载是主观的最大问题。一些浏览器会在内容进入后立即考虑加载正文，其他浏览器会等待图像，而较旧的IE版本则不会全部启动！因此，如果您使用推荐的window.onload，那么您应该没问题，因为只要DOM准备好就会立即触发。您可能需要考虑的另一个重要事件是DOMContentLoaded，但它没有得到广泛支持。还有更多（通过点击）：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

我还想补充一点，即使您按下按钮进行显示，它也没有内容，因此它可能显示为空或者您正在重置按钮样式，而不是。要记住的事情。

Answer 2

您的代码存在一些问题：

document.body.onload应由window.onload替换，如评论中所述
在onload函数中，您定义了一个函数，但是您没有调用它...

所以

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

应替换为：

window.onload = function up() { // Could be anonymous, of course, but should not
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}

最后但并非最不重要，you should not use the on<Events> HTML attributes。

Answer 3

回答你的问题＆＃34;我的想法是当我向下滚动时，然后会出现UP按钮。＆＃34;我认为你应该注册＆＃39; 滚动＆＃39;可滚动容器div上的事件。＆＃39;主体/在window.onload＆＃39;函数只会被触发一次，因此它不会满足要求。以下是您可以继续（working fiddle）

的方法

<div id="container" onscroll="handleScroll(this)">
    <button id="UP" onclick="toTop(350);">Go to Top</button>
     Scroll me</br>....scrollable content

的Javascript

function handleScroll (obj) {
    var displayVal = "block";
    if (obj.scrollTop == "0") {
        displayVal = "none";
    }
    document.getElementById('UP').style.display = displayVal;
};

Javascript onload无效（“Uncaught TypeError：无法设置属性'document.body'为null”）

3 个答案: