Javascript 滚动到视口的中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11529070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll to the center of viewport
提问by Designon
I would like to center a divby clicking it. So if I'm clicking a divI want it to scroll to the center of the browser viewport. I don't want to use anchor points like the guides and examples I've seen. How can I achieve this?
我想div通过单击将a 居中。因此，如果我单击 adiv我希望它滚动到浏览器视口的中心。我不想使用像我见过的指南和示例那样的锚点。我怎样才能做到这一点？
回答by insertusernamehere
In some way you have to identify the clickable elements. I build an example, that uses the class-attribute for that.
在某种程度上，您必须识别可点击的元素。我构建了一个示例，它为此使用了class-attribute。
Step 1
第1步
This is the script, that does the work:
这是完成工作的脚本：
$('html,body').animate({
scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);
What you tried is to scroll the container to the top of the page. You also have to calculate and subtract the difference between the container height and the viewport height. Divide this by two (as you want to have the same space on top and bottom and you are ready to go.
您尝试的是将容器滚动到页面顶部。您还必须计算并减去容器高度和视口高度之间的差值。将其除以二（因为您希望顶部和底部具有相同的空间，并且您已准备就绪。
Step 2
第2步
Then you add the click handler to all the elements:
然后将点击处理程序添加到所有元素：
$(document).ready(function () {
$('.image').click( function() {
$('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2 }, 200);
});
});
Step 3
第 3 步
Set up some HTML/CSS:
设置一些 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>
And you're done.
你已经完成了。
Check out the demo
查看演示
Try it yourself http://jsfiddle.net/insertusernamehere/3T9Py/
回答by herringtown
I've got one slight modification to offer; if the "adjustment factor" (i.e. ( $(window).height() - $(this).outerHeight(true) ) / 2) is < 0 you can get undesirable results whereby you overshoot that element in the viewport with your scroll. I added a max(0,adjustment factor) to correct :
我有一个轻微的修改要提供；如果“调整因子”（即（ $(window).height() - $(this).outerHeight(true) ) / 2） < 0，您可能会得到不希望的结果，您可以通过滚动在视口中超过该元素. 我添加了一个 max(0,adjustment factor) 来纠正：
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);
}
回答by Ciar
HTMLElement.prototype.scrollToCenter = function(){
window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}
Achieved with pure JavaScript for Scrolling to Center in the vertical direction. And it's similar in the horizontal direction. I don't take elements' height into consideration, because they maybe larger than the height of screen.
使用纯 JavaScript 实现垂直方向滚动到中心。在水平方向上也是类似的。我不考虑元素的高度，因为它们可能大于屏幕的高度。
