Question

我创建了一个按钮，该按钮应将窗口的Y从div's的中间移至“ BOX-5” onclickY。因此，换句话说，我想在窗口中间设置“ Box-5” div。我已经尝试过使用window.scrollTo和elements.innerHeight/2的许多方法，但是仍然不能将元素居中到窗口/屏幕的中央。请帮忙。

我只希望使用Javascript，但是如果无法使用，那么我会接受jQuery脚本。

index.html:

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
    current = 0;

for (var y=0;y<10;y++) {
    var box = document.createElement("div");
    box.id = "box";
    box.innerHTML = "Box - " + (y+1);
    content.appendChild(box);
}

document.querySelector("BUTTON").onclick = function() {
    var box_5 = document.querySelectorAll("#box")[4];
    /*
        NEED HELP HERE
    */
}

body {
    margin: 0;
}

#box {
    position: relative;
    height: 500px;
    width: 100%;
    margin: 5% auto 5% auto;
    color: black;
    background-color: skyblue;
    border: black 1px solid;
    font-size: 50px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
    <div id="content"></div>
</body>
</html>

Answer 1

如下更新了您的代码段。您可以使用DOM元素属性offsetTop来检查其Y位置，并使用window.scroll将视图滚动到该元素。另一个旁注，最好不要将相同的id分配给多个元素，因此我将id属性更改为class，并为类名添加了标识符_{index}。

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
    current = 0;

for (var y=0;y<10;y++) {
    var box = document.createElement("div");
    box.className += "box _" + (y+1);
    box.innerHTML = "Box - " + (y+1);
    content.appendChild(box);
}

document.querySelector("BUTTON").onclick = function() {
    var box_5 = document.querySelectorAll(".box._5")[0];
    if (box_5) {
        // scroll the window view to the element
        window.scroll({
            top: box_5.offsetTop,
            behavior: 'smooth',
        }) 
    }
}

body {
    margin: 0;
}

.box {
    height: 500px;
    width: 100%;
    margin: 5% auto 5% auto;
    color: black;
    background-color: skyblue;
    border: black 1px solid;
    font-size: 50px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
    <div id="content"></div>
</body>
</html>

如何将窗口的Y中间设置为元素的Y中间？

1 个答案: