We are using Chrome Headless to generate a PDF. In our html we’re generating a Table of Contents with anchor tags to navigate us to each section in the PDF. Unfortunately, when you click on the link it navigates way past the beginning of the section and the user always has to scroll back up. Is there a better way to do this? The code looks like this:

<div> Table of Contents </div>
    <div class="margined-container" style="flex-direction: column;">
        <div ><a href="#section-1">Section 1</a</div>
        <div ><a href="#section-2">Section 2</a></div>
        <div ><a href="#section-3">Section 3</a></div>
        <div ><a href="#section-4">Section 4</a></div>
    </div>

    <div id="report-details" style="display: flex;">
    </div>

    <div id="main-content" style="display: flex; flex-direction: column;">
        <app-report-details id="section-1" [data]="data1"></app-report-details>
        <app-report-table-1 id="section-2" [dataItems]="data2"></app-report-table-1>
        <app-report-table-2 id="section-3" [dataItems]="data3"></app-report-table-2>
        <app-report-table-3 id="section-4" [dataItems]="data4"></app-report-table-3>
    </div>