HTML/CSS 链接滚动不滚动到正确的位置

Question

我无法弄清楚为什么我的链接没有滚动到正确的位置。他们正在滚动到下面他们应该去的部分。我查看了所有我能找到的示例，但都无济于事。

 <div class="bottomarea">
 <div class="bottomareatitles">IDX Website Features</div>
 <div class="bottomareasubtitle">WeeboWeb real estate websites have all the tools you need to market yourself and grow your business online. Effective, professional designs that connect you with 32% more buyers and sellers. </div>
 <div id="iconcontainer">
    <a href="#effectivedesigns"><div class="bottomareaicons"><i class="fa fa-laptop" aria-hidden="true"></i><br>Effective Designs</div></a>
    <a href="#quicksetup"><div class="bottomareaicons"><i class="fa fa-hourglass-half" aria-hidden="true"></i><br>Quick Setup</div></a>
    <a href="#leadcapture"><div class="bottomareaicons"><i class="fa fa-users" aria-hidden="true"></i><br>Lead Capture</div></a>
    <a href="#mapsearch"><div class="bottomareaicons"><i class="fa fa-map-marker" aria-hidden="true"></i><br>Map Search</div></a>
    <a href="#mobilefriendly"><div class="bottomareaicons"><i class="fa fa-mobile" aria-hidden="true"></i><br>Mobile Friendly</div></a>
    <a href="#socialmedia"><div class="bottomareaicons"><i class="fa fa-facebook" aria-hidden="true"></i><br>Social Media</div></a>
    <a href="#blogging"><div class="bottomareaicons"><i class="fa fa-comments" aria-hidden="true"></i><br>Blogging</div></a>
    <a href="#branding"><div class="bottomareaicons"><i class="fa fa-pencil" aria-hidden="true"></i><br>Branding</div></a>
</div></div>

<div class="bottomsection">
  <div class="section">
  <h1><a id="effectivedesigns">Effective Designs</a></h1>
  <p>sample content</p></a>
  </div>

  <div class="section">
  <h1><a id="quicksetup">Quick Setup</a></h1>
  <p>sample content</p>
  </div>

 <div class="section">
 <h1><a id="leadcapture">Lead Capture</a></h1>
 <p>sample content</p>
 </div>
 <div class="section">
 <h1><a id="mapsearch">Map Search</a></h1>
 <p>sample content</p>
 </div>

 <div class="section">
 <h1><a id="mobilefriendly">Mobile Friendly</a></h1>
 <p>sample content</p>
 </div>

 <div class="section">
 <h1><a id="socialmedia">Social Media</a></h1>
 <p>sample content</p>
 </div>

 <div class="section">
 <h1><a id="blogging">Blogging</a></h1>
 <p>sample content</p>
 </div>

 <div class="section">
 <h1><a id="branding">Branding</a></h1>
 <p>sample content</p>
 </div></div>

这是 CSS

.bottomarea {display:block; width:100%;}
.bottomareatitles {text-align:center; margin-top:50px; font-size:26px; color:#000000; font-weight:350;}
.bottomareasubtitle {text-align:center; padding-top:20px; color: dimgrey; width:75%; margin:auto;}
.bottomareaicons {width:130px; display:inline-block; margin:auto; text-align:center; margin-top:40px; color:#000000; font-size:16px; padding-bottom:10px; padding-top:10px;}
.bottomareaicons:hover {width:130px; display:inline-block; margin:auto; text-align:center; margin-top:40px; color:#000000; font-size:16px; background:#2584b8; padding-bottom:10px; padding-top:10px;}
.bottomareaicons i {font-size:3.0em; padding-bottom:20px; color:#2584b8;}
.bottomareaicons:hover > i {font-size:3.0em; padding-bottom:20px; color:#ffffff;}
.iconcontainer {margin:auto; text-align:center;}
.bottomsection {margin-top:50px;}
.bottomsection .section h1 {text-align:center;}
.bottomsection .section p {text-align:center;}

您可以在此处查看发生的情况的实例:https://www.weeboweb.com/idx-websites/

我试图只使用 css 来完成这项工作。任何帮助是极大的赞赏。这让我有点困惑。

Answer 1

它实际上并没有滚动到“下方”，而是滚动到它应该滚动的位置。问题是该区域被固定在屏幕顶部的顶部导航覆盖。您需要考虑到您的间距，或者没有固定的顶部导航。