我正在构建一个带有固定位置导航栏的单页网站,该导航栏通过锚链接平滑滚动到不同的部分元素。滚动到元素的默认行为是将其与浏览器窗口的顶部对齐。相反,我想将元素对齐到屏幕的中间。
我使用此标记进行导航:
<nav class="main-nav">
<a href="#top">Top</a>
<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
<a href="#section-3">Section 3</a>
<a href="#section-4">Section 4</a>
<a href="#section-5">Section 5</a>
</nav>
我使用kswedberg 的 jQuery Smooth Scroll 插件来平滑滚动。我这样启动它:
$('.main-nav a').smoothScroll({
offset: 0,
speed: 700
});
我想将偏移量设置为((window).height / 2) - (element height / 2)
垂直居中,但我需要帮助来弄清楚如何正确执行它。
我需要它:
- 获取窗口的高度并将其除以二
- 获取元素的高度并将其除以二
- 后者减去前者
- 如果可能,如果元素高于窗口,则默认将其对齐到顶部
由于有很多锚链接,我假设我需要检查单击的锚链接链接到的元素的高度,或者为每个锚链接启动 smoothScroll。
有人知道怎么做这个吗?