actualmente estoy usando id para desplazarme a la sección particular de la página, pero cada vez que hago clic, no está alineado con la parte superior de la página, sino que va a la mitad de la página. supongamos que mi enlace es www.example.com cada vez que hago clic en el enlace por primera vez sin una identificación presente en el enlace, se desplaza al centro de la página, pero cuando la identificación está presente en un enlace como www.example.com#id , entonces funciona totalmente bien

mi código

 <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>

¿Alguien puede decir cómo solucionar esto con js o css?