ScrollTo.js：滚动到 div 的确切中心

Question

我正在尝试找出 jquery 在您单击按钮时滚动到 div 的确切中心。目前我只能滚动到具有声明偏移量的 X 和 Y 坐标。这意味着我将不得不根据您使用的设备（大型显示器、笔记本电脑、ipad、iphone）重新声明 jquery 中的 X 和 Y，但它不会正好在中间。

我知道它与声明 window 高度和 window 宽度 divided by 2 的变量有关，但我正在努力使用 SO 上的答案使其工作。

var wWidth = $(window).width();
var wHeight = $(window).height();

代码笔：https://codepen.io/artchibald/pen/ddKVNw

谢谢。

Answer 1

关于使用 div 宽度和高度的一半的说法是正确的。所以它可能变成：

clickmeVar.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#myDiv", offsetY: $(window).innerHeight() / 2 - $('#myDiv').height() / 2, x:"#myDiv", offsetX: $(window).innerWidth() / 2 - $('#myDiv').width() / 2, autoKill:false}},100);
};

或没有 jQuery 选择器：

clickmeVar.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#myDiv", offsetY: window.innerHeight / 2 - document.querySelector('#myDiv').clientHeight / 2, x:"#myDiv", offsetX: window.innerWidth / 2 - document.querySelector('#myDiv').clientWidth / 2, autoKill:false}},100);
};

此处我们使用可见屏幕宽度和高度的一半减去元素宽度和高度的一半。

这是一个工作示例：

var clickmeVar = document.getElementById("clickme");
var windowheight = $(window).height();
var windowwidth = $(window).width();
var pagecenterW = windowwidth/2;
pagecenterW=pagecenterW/2;
var pagecenterH = windowheight/2;
pagecenterH=pagecenterH/2;

clickmeVar.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#myDiv", offsetY: $(window).innerHeight() / 2 - $('#myDiv').height() / 2, x:"#myDiv", offsetX: $(window).innerWidth() / 2 - $('#myDiv').width() / 2, autoKill:false}},100);
};
//      $("#myDiv")
//      .css({top: pagecenterH + 'px', left: pagecenterW+ 'px'});

body {
  width: 3000px;
  height:2000px;
  background:blue;
}
#myDiv {
  width:100px;
  height:100px;
  background:red;
  position:relative;
  left:800px;
  top:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js"></script>

<button id="clickme">click here to put the red square exactly in the center of the viewport</button>
<div id="myDiv"></div>

ScrollTo.js：滚动到 div 的确切中心

ScrollTo.js: scroll to the exact center of a div

jquery

centering

scrollto

gsap