在屏幕上垂直滑动导航到中心答案

【问题标题】：slide navigation to the center vertically on screen在屏幕上垂直滑动导航到中心
【发布时间】：2015-09-26 22:57:34
【问题描述】：

我正在开发一个使用滚动视差的网站，只有一个长长的网站页面，分为幻灯片。

第一张适合屏幕的幻灯片是主菜单带菜单：关于我们、联系方式等然后其余的幻灯片也适合屏幕。

如果我想点击about us，我的网站可以平滑滚动导航到第一张幻灯片下方的关于我们，并且应该导航到目标元素的中心，并且在屏幕上垂直居中。

HTML 是

<a href="#aboutuscontents" class="active" title="Next Section" >Slide 1</a>

我认为在 jquery 上这一行：

var targetOffset = $target.offset().top but i'm not sure with it

对此负责，但我不知道如何居中，因为没有可用的中心只有top and left

问题是，导航时，使用targetOffset，元素的最顶部会粘在屏幕顶部的边缘。|

到这个链接： jQuery - Scroll element to the middle of the screen instead of to the top with an anchor link 这和我的问题一样并且链接清楚地说明了我的问题是什么，并且在行中偏移量 = elOffset - ((windowHeight / 2) - (elHeight / 2)); 它回答了我的问题。

谢谢

【问题讨论】：

$target.offset() 为您提供一个对象，其中包含 $target 元素相对于屏幕左上角的位置 (0,0)。如果您尝试使元素居中对齐，您可能希望通过 CSS 来实现。
你可以简单地做一些数学运算。你的垂直目标中心是 $target.offset().top + $target.height()/2 和你的水平中心是 $target.offset().left + $target.width()/2

【解决方案1】：

感谢 Brodie 下面的一位 cmets，这对我有用。

$target.offset() 为您提供一个对象，其中包含 $target 元素相对于屏幕左上角的位置 (0,0)。如果您尝试使元素居中对齐，您可能希望通过 CSS 来实现。

【讨论】：