Question

您可以使用带有主题标签和元素ID的网址滚动到元素：

window.location.href = "#ID"

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

Answer 1

您可以在导航发生后立即向上滚动：

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

这将导致聚焦元素出现在屏幕的中间，垂直居中。 2.1导致它滚动到屏幕的一半以下，因为顶部会有一些空间。你可以调整＆＃34; .1＆＃34;匹配你想要的效果（基线，中间等）。

强制性小提琴链接：http://jsfiddle.net/ckhafLzq/2/

Answer 2

这就是我所取得的成就：

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];
}

Answer 3

不，没有内置方式，你必须自己写一下：

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

替代方案，无需编写自己的代码：您可以滚动以便元素位于底部，方法是将false传递给scrollIntoView，或者只有在元素通过调用{{1 }，仅适用于Chrome AFAIK。

JavaScript - 向下滚动到元素

3 个答案: