Demo: CSS scroll-margin-block-start

<div class='container'>
  <h2 class='header'>Header</h2>
  <div class='content'>
    <p>Scroll down to see the effect.</p>
    <div class='target'>Target Element</div>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
  </div>
</div>

.container {
  height: 200vh;
  background-color: #f0f0f0;
  padding: 20px;
} 

.header {
  font-size: 24px;
  margin-bottom: 20px;
} 

.target {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin-top: 100px;
  scroll-margin-block-start: 50px;
  scroll-margin-top: 50px; /* Added for compatibility with block-start */
} 

.content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

// No JavaScript required for this demo

Scroll down to see the effect.

Target Element