滚动到视窗中心

Question

我想通过点击来使一个 div 居中。因此，如果我点击一个 div，我希望它滚动到浏览器视口的中心。 我不想使用像我看到的指南和示例中的锚点。我该如何实现这个效果？

- Designon

---

$('html,body').animate({ scrollTop: $("#divToBeScrolledTo").offset().top; });我不想指定是哪个 div。我想要将我点击的 div 居中。所以如果我正在浏览图片，我希望将图片居中在浏览器视口中。由于人们可以添加自己的图片，因此手动添加锚点并不方便 :) - Designon

当然，您需要指定要滚动到哪个div。 您不知道想居中的内容是什么吗？ - Bergi

当然可以啊！但是我能不能像 ScrollTo('this') 这样做呢？ - Designon

不行，因为字符串“this”不是一个有效的选择器。请阅读文档了解jQuery构造函数能够处理什么内容。 - Bergi

如果我有“随机”的ID，我该如何解析选择器和对象？ :) - Designon

为什么要随机id？你是否知道div（例如具有指向节点的变量）呢？ - Bergi

Answer 1

您需要以某种方式识别可单击的元素。我建立了一个示例，使用class属性进行识别。

步骤1

这是执行此操作的脚本：

$('html,body').animate({
    scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);

你尝试的是将容器滚动到页面顶部。你还需要计算并减去容器高度与视口高度之间的差异。将其除以二（因为您希望顶部和底部有相同的空间），然后就可以开始了。

步骤2

接下来，您需要将单击处理程序添加到所有元素中：

$(document).ready(function () {
    $('.image').click( function() {
        $('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2  }, 200);
    });
});

步骤三

设置一些HTML/CSS：

<style>

    div.image {

        border:     1px solid red;
        height:     500px;
        width:      500px;
    }

</style>

<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>

完成了。

查看演示

自己试试吧：http://jsfiddle.net/insertusernamehere/3T9Py/

- insertusernamehere

---

insertusernamehere 你太牛了！谢谢！ - Designon

Answer 2

我知道这个问题很老了，但现在你可以使用scrollIntoView方法：

例如：

document.body.scrollIntoView({
  behavior: 'smooth',
  inline: 'center',
  block: 'center'
});

- KBeDev

---

不幸的是，它在旧版浏览器中无法运行。 - AEB

...和Safari https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView#browser_compatibility - Jan Molnár

是的，Safari不支持选项对象参数。要获得此功能，您需要使用页面客户端高度来计算中心值。您可以使用scroll()或scrollBy()方法。这些方法在现代版本的Safari（14+）中得到了完全支持。 - KBeDev

Answer 3

HTMLElement.prototype.scrollToCenter = function(){
    window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}

使用纯JavaScript实现在垂直方向上滚动到中心。在水平方向上也类似。我没有考虑元素的高度，因为它们可能大于屏幕的高度。

- Ciar

---

你能解释一下为什么在这里使用“>>”（右移）运算符吗？ - escottalexander

窗口的高度除以2等于窗口的高度右移1位。 - Paul Swarthout

Answer 4

我有一个小修改建议。
如果"调整因素"，即($(window).height() - $(this).outerHeight(true))/2小于0，则您可能会通过滚动超过视口中的该元素，导致不良结果。
我添加了max(0, 调整因素)来进行修正。

    function scrollIntoView(el) {
    
        var offsetTop = $j(el).offset().top;
        var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
        var scrollTop = offsetTop - adjustment;
    
        $j('html,body').animate({
            scrollTop: scrollTop
        }, 200);
    }

- herringtown

---

@insertusernamehere 但这种方法，如果元素大于窗口高度，它将完全可见，而不是居中，但从一开始就可见，这就像“将其居中，直到它不适合为止，然后将视图滚动到元素开头” - Programista

@Programista 啊，谢谢你解释得这么清楚。现在我明白了“overshoot”的意思。根据使用情况（真正居中或者只在适用时居中），这是另一种解决方案，这里有一个fiddle示例来演示它。 - insertusernamehere

非常感谢，我根据自己的需求进行了简化处理，现在运行得非常好 =) - Can Rau

这在原生JavaScript中会是什么？ - LStarky