滚动到视口中心

我想通过点击它来居中一个div 。 因此，如果我点击div我希望它滚动到浏览器视口的中心。 我不想像我看到的指南和例子那样使用锚点。 我怎样才能做到这一点？

Answer 1

在某种程度上，您必须识别可点击元素。 我构建了一个示例，它使用了class -attribute。

步骤1

这是完成工作的脚本：

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

您尝试的是将容器滚动到页面顶部。 您还必须计算和减去容器高度和视口高度之间的差异。 将其除以2（因为你想在顶部和底部有相同的空间，你准备好了。

第2步

然后将click处理程序添加到所有元素：

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

第3步

设置一些HTML / CSS：

  
1
 
2
 
3
 
4
 
5 

而且你已经完成了。

看看演示

亲自尝试http://jsfiddle.net/insertusernamehere/3T9Py/

Answer 2

我有一个小小的修改提供; 如果“调整因子”（即（$（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); } 

Answer 3

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

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