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

Question

我试图找出 jquery 在您单击按钮时滚动 div 的确切中心。目前我只能滚动到带有声明偏移量的 X 和 Y 坐标。这意味着我必须根据您使用的设备（大显示器、笔记本电脑、ipad、iphone）在 jquery 中重新声明 X 和 Y，而且它也不会完全位于中心。

我知道这与声明窗口高度和窗口宽度除以 2 的变量有关，但我正在努力使用 SO 上的答案使其工作。

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

Codepen：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>