リアクション内の要素にスクロール

Question

ページ上のすべての大きなセクションヘッダーを参照しています。ページは非常に長く、よくレンダリングされます100vh。スクロール可能なセクションはかなりネストされたdivであり、refもあります。セクションヘッダーのrefsと内部コンテナの参照（window.scrollToなどは使用できません）が与えられた場合、どのようにして "クリック時にセクションに移動"できますか？

<div> 
    <div> 
    <button onClick={ // navigate to section }>Navigate</button> 
    </div> 
    <div> 
    <div ref="inner_content"> 
     <h2 ref="section1">Section 1</h2> 
     <h2 ref="section2">Section 2</h2> 
     <h2 ref="section3">Section 3</h2> 
    </div> 
    </div> 
</div> 

// on navigate, I've tried things like this which have made the page scroll, but I can't understand which scroll/height properties I would need to access to pinpoint where the view should scroll too 
this.refs.inner_content.scrollTop(this.refs.section1.getBoundingClientRect().top) 

私は、セクション、参考文献にscrollTopとgetBoundingClientRects().topを使用してこれを行うには一貫性のある方法を見つけることができませんでした。

Answer 1

私は古いアプローチを使用して、リンクからセクションに移動することができると思います。これはしかしURLを汚染

これは私が

<div id="section1"> 
This is section 1 
</div> 

をナビゲートするセクションで、アンカーリンクの上に私は

<a href="#section1">Section 1</a>