小编Nil*_*son的帖子

我正在构建一个带有固定位置导航栏的单页网站,该导航栏通过锚链接平滑地滚动到不同的部分元素.滚动到元素的默认行为是将其与浏览器窗口的顶部对齐.相反,我想将元素对齐到屏幕的中间.

我使用这个标记进行导航:

<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)垂直居中,但我需要帮助来弄清楚如何正确执行它.

我需要它:

• 获取窗口的高度并将其除以2
• 获取元素的高度并将其除以2
• 从后者中减去前者
• 如果可能,如果元素高于窗口,则将其与默认值对齐

由于有许多锚链接,我假设我需要检查单击链接的锚链接的元素高度,或者为每个锚链接启动smoothScroll.

有人知道怎么做这个吗？

我必须承认HTML5语义标记让我困惑.我特别在谈论这些标签:

<header>
<nav>
<section>
<article>
<aside>
<footer>

使用语义元素为UA提供了通常无法从中获取的信息<div>,但它们是否应与 <div>标签一起使用,或者是否可以/应该直接设置语义标记？

换句话说,什么是正确的方法？

这个:

<div id="content">
    <section>
        <h1>Lorem ipsum></h1>
        <p>Text</p>
    </section>
</div>

或这个:

<section id="content">
    <h1>Lorem ipsum></h1>
    <p>Text</p>
</section>