How to offset links and anchors in React?

Question

I can't offset the jump point for anchor tags in my React app. No matter how much I adjust paddings, margins, and top; I get the same result. The last thing I tried is react-router-hash-link-offset and it behaves the exact same way with the exception of the scroll.

<li className="app-link"><Link to="#section1" smooth scrollOffset="100">Summary</Link></li>

<div className="app-section" id="section1">
          <h3>Summary</h3>
</div>

I'm opened to any suggestions at this point.

Answer 1

Use this library to implement this feature.

react-router-hash-link

Live demo