Demo: CSS scroll-margin

<div class='container'>
  <h1>Scroll to See the Effect</h1>
  <div class='spacer'></div>
  <div class='target'>Target Element</div>
  <div class='spacer'></div>
  <div class='spacer'></div>
  <div class='spacer'></div>
  <div class='spacer'></div>
  <div class='spacer'></div>
</div>

.container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}

.spacer {
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px 0;
}

.target {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  scroll-margin-top: 50px;
}

// No JavaScript required for this demo