アンカーにネストされたdivの上半分のみがクリック可能です

Question

ここでの基本的な考え方は、円のdivの内側に素晴らしいフォントがあります。サークルをクリックして、ページをサークルの真上に自動スクロールさせたいと思っています。サークルの上半分だけがクリック可能であることを除いて、すべてのことが機能します。ブートストラップが行と列に使用されています。ブラウザはChromeです。私は別の解決策（HTMLとCSSだけである限り）を公開していますが、特にこのバグがなぜ発生しているのかを知りたいと思っています。

HTML

<div class="row"> 
    <div class="col-sm-12"> 
     <a name="howitworks" class="HowItWorks__anchor"></a> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-sm-12"> 
     <a href="#howitworks"> 
     <div class="HowItWorks__downArrow"> 
      <i class="fa fa-3x fa-angle-down" aria-hidden="true"></i> 
     </div> 
     </a> 
    </div> 
</div> 

CSS

.HowItWorks__anchor { 
    position: absolute; 
    top: -50px; 
} 

.HowItWorks__downArrow { 
    color: $white; 
    background-color: $brand-blue-dark; 
    height: 50px; 
    width: 50px; 
    border-radius: 100%; 
    text-align: center; 
    padding-top: 5px; 
    position: absolute; 
    bottom: -22px; 
    left: calc(50% - 25px); 
} 

スクリーンショット

Answer 1

TL; DR：両親のすべては、サークルのdivと等しくなるように設定高さを持っている必要があります。

最後にそれが機能しました。私は持っていなかった

HTML

<div class="row"> 
    <div class="col-sm-12"> 
     <a name="howitworks" class="HowItWorks__target"></a> 
    </div> 
</div> 

<div class="row HowItWorks__anchorWrapper"> 
    <div class="col-sm-12"> 
     <a href="#howitworks"> 
      <div class="HowItWorks__downArrow"> 
       <i class="fa fa-3x fa-angle-down" aria-hidden="true"></i>&nbsp; 
      </div> 
     </a> 
    </div> 
</div> 

CSS

.HowItWorks__target { 
    position: absolute; 
    top: -50px; 
} 
.HowItWorks__anchorWrapper { 
    height: 30px; 
} 
.HowItWorks__anchor { 
    border-radius: 30px; 
    width: 30px; 
    height: 30px; 
    margin: 0 auto; 
    text-align: center; 
} 
.HowItWorks__downArrow { 
    color: $white; 
    background-color: $brand-blue-dark; 
    height: 50px; 
    width: 50px; 
    border-radius: 100%; 
    text-align: center; 
    padding-top: 5px; 
    padding-left: 3px; 
    position: absolute; 
    bottom: -20px; 
    left: calc(50% - 25px); 
} 

Answer 2

より良いあなたのアンカーは単に負の使用タグ内にそれらの余分divを削除...ここoverengineerはありませんmargin：

<a id="your-link"> 
    <span class="fa fa-angle-down"></span> 
</a> 

a#your-link { 
    border-radius: 30px; 
    display: block; 
    width: 30px; 
    height: 30px; 
    margin: -15px auto 0; 
    text-align: center; 
} 

または相対的な位置を追加します。

a#your-link { 
    border-radius: 30px; 
    display: block; 
    width: 30px; 
    height: 30px; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
    top: 15px; 
} 

これを達成するには、いくつかの方法がありますが、それらはすべて有効ですが、ちょうどきれいなブロック要素として、あなたのアンカータグを処理して、それを適切に配置します。

UPD OK、このようごセクションのマークアップを維持しよう：

<section> 
    // some section content 
    <a class="section-link"> 
     <span class="fa fa-angle-down"></span> 
    </a> 
</section> 

section { 
    position: relative; 
} 

.section-link { 
    border-radius: 30px; 
    display: block; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    position: absolute; 
    left: 50%; 
    bottom: -15px; 
    margin-left: -15px; 
}