JavaScript-向下滚动到元素

您可以使用带有标签和元素ID的url滚动到元素：

window.location.href = "#ID"

---

这将使元素的顶部位于浏览器的顶部。如何滚动到元素，使其垂直居中？

不，没有内置方式，您必须自己编写：

function center_element_vertically(elt) {
    var rect = elt.getBoundingClientRect();
    window.scrollTo(0, rect.top + window.pageYOffset - 
        (window.innerHeight - rect.height)/2);
}

---

无需编写自己的代码的备选方案：您可以通过将

false

传递到

scrollIntoView

，滚动元素，使其位于底部，或者仅在元素尚未可见时，通过调用

scrollIntoViewIfNeeded

，滚动元素，仅在Chrome AFAIK中可用。

您可以在导航完成后立即向上滚动：

addEventListener("hashchange", function(){
    setTimeout(function(){ 
          document[
             document.documentElement.scrollTop ? 
             "documentElement":
             "body"
          ].scrollTop-= (innerHeight/2.1);
     }, 1); 
}, false);

这将导致聚焦元素出现在屏幕的中间，垂直居中。 2.1会使它滚动到屏幕的一半以下，因为顶部已经有了一些空间。您可以调整“.1”以匹配所需效果（基线、中间等）

---

强制性小提琴链接：

这就是我所取得的成就：

function centerScroll(element) {
    if (!(element instanceof Element)) {
        throw new TypeError("Element expected");
    }

    var bodyRect = document.body.getBoundingClientRect();
    var elementRect = element.getBoundingClientRect();

    var left = elementRect.left - bodyRect.left;
    var top = elementRect.top - bodyRect.top;

    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

    var elementWidth = element.offsetWidth;
    var elementHeight = element.offsetHeight;

    var x = left - Math.max(0, (windowWidth - elementWidth) / 2);
    var y = top - Math.max(0, (windowHeight - elementHeight) / 2);

    window.scrollTo(x, y);

    return [x, y];
}

---

为什么要关闭它？就像我如何编写这样的函数一样？通过计算元素的大小和当前位置（使用

getBoundingClientRect

）。你的问题是字面上的“有办法吗？”，还是实际上是“我该怎么做？”？不应该是“+window.pageYOffset”是“-document.getBoundingClientRect（）.top”？

document

没有

getBoundingClientRect

方法，它是

HtmleElement

上的方法。

window.pageYOffset

有什么问题吗？对不起，我是指document.body，自从看到这个后我一直在想：（看到最上排的答案）innerHeight是当前视口的像素高度，有什么不明白的？在这种情况下，我误解了你的答案，因为

（innerHeight/2.1）

将不会使项目在视口中居中。数学非常简单：scrollToElement-（（viewportHeight-elementHeight）/2）。。。或者我错过了什么？嗯。。。你的小提琴在FF中不起作用，OP也要求

“将一个元素垂直居中？”

@RokoC.Buljan：愚蠢的怪癖，这里有一个在firefox和chrome中起作用的：，谢谢你的提醒！