currently i am using id to scroll to the particular section of the page but whenever i click it is not aligned to the top of page but going to the middle of page. suppose my link is www.example.com whenever i click the link first time with no id present on link , it scrolls to centre of page but when id is present in link like www.example.com#id then it works totally fine

my code

<ul>
  <li><a href="#glossary-body-content">${dto.pageInfo.title} - Definition with Examples</a></li>
  <#if dto.adhocFaqs?size != 0>
  <li><a href="#glossary-faq-section">Frequently Asked Questions</a></li>
  </#if>
  <#if dto.practiceQuestions?size != 0>
  <li><a href="#glossary-question-answer-section">Practice Problems</a></li>
  </#if>
</ul>

can anyone tell how to fix this with js or css