为什么html会在内容之间跳出差距？

Question

所以我的新网站（Click here）出现了这个问题。 当您尝试向下滚动时，html突然跳转到下一个div（#Join）的顶部。 同样，当你点击“加入”时，它会突然跳到div的末尾。 我不知道为什么会发生这种情况，但是在我为标题添加了一个margin-bottom（header和#Join之间未使用的空格）后发生了这种情况。

CSS片段：

header {
    width: 100%;
    top: 0;
    margin-bottom: 600px;
}

#Join {
    width: 900px;   
    height: 700px;
    background-color:#FFF;
    border-radius: 10px;
    margin:auto;
}

HTML：

<div id="page" class="">
    <div class="background">
        <div class="wow fadeIn" data-wow-duration="3s">
            <header class="static topheader">
                <div style="margin-top: -5px;"class="leftheader toplist">
                    <a id="logo" href="#">Evoc</a>
                </div>
                <div id="navbar" >
                    <ul class="menulist">
                        <li class="menuitem toplist"><a href="#Join">Join</a></li>
                        <li class="menuitem toplist"><a href="#blog">Blog</a></li>
                        <li class="menuitem toplist"><a id="login" href="javascript:void(0)"> Login </a></li>
                    </ul>
                </div>
            </header>
        </div>

        <div id="Join">



        </div>

我使用的其他插件是：

• Animate.css
• 的jquery.js
• Wow.js
• Smoothscroll.js

问题：为什么html会跳过这个差距？我怎样才能阻止它跳过这个差距呢？

非常感谢任何帮助，

提前致谢。

聚苯乙烯。如果需要任何进一步的信息，请随时在评论中提问。

Answer 1

突然跳转是由div背景后使用的多个中断标记引起的。

您可以指定br或margin相对于元素之间或元素之间的空间，而不是使用padding标记。

Answer 2

如果你真的希望你的标题和＆＃34;＃Join＆＃34;之间存在差距。 DIV。 试试这个Hack。在＆＃34;＃Join＆＃34;之前加上一些高度的div。并从标题中删除边距底部。

<div style="height: 600px;"></div>
<div id="Join">
</div>