Scroll con offset in Javascript

Supponiamo che quando clicco su una immagine la pagina debba scrollare fino ad un certo punto, tipo ad un div.

Ma deve arrivare un pò più in su.

Possiamo fare questo in Javascript.

Vi metto un pò di codice:

<a href="#dona" class="img_arrow_header">Vai a Dona</a>

<div id="dona" style="margin-top: 150px;"> <!-- solo a scopo dimostrativo -->
  <h2>Sezione Dona</h2>
  <p>Testo della sezione dona...</p>
</div>

<script>
document.querySelector('a[href="#dona"]').addEventListener('click', function(e) {
  const target = document.getElementById('dona');
  if(target) {
    e.preventDefault();
    const offset = 80; // Cambia questo valore come preferisci
    const elementPosition = target.getBoundingClientRect().top + window.pageYOffset;
    window.scrollTo({
      top: elementPosition - offset,
      behavior: 'smooth'
    });
  }
});
</script>

Enjoy!