How to scroll 50px beyond a

Question

Is it possible to scroll to a div using HTML, but instead of scrolling to the top of the div, scroll 50px up from the div ?

Ive been following this method taken from HERE, but wondered how i could scroll past the div if required. Ideally i would like to do this with just HTML an no JS, but could use JS if required.

HTML

<a href="#google"></a>

<div id="google"></div>

CSS

html {
  scroll-behavior: smooth;
}

you can make a named `anchor` and position it 50px below the `div` — Nicolas Straub, May 15 '23 at 20:03

Temani Afif · Accepted Answer · 2023-05-15T21:12:50.533

1

scroll-snap combined with scroll-margin can help you

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

#google {
  height: 200px;
  border: 2px solid blue;
  background: red;
  scroll-snap-align: start;
  scroll-margin: 50px; /* OR -50px based on what you want */
}

<a href="#google">Scroll</a>
<div style="height: 800px"></div>
<div id="google"></div>
<div style="height: 800px"></div>

edited May 15 '23 at 21:12

answered May 15 '23 at 20:07

Temani Afif

245,468
26
309
415

@Andria both of them are in the code (there is an `OR`) – Temani Afif May 15 '23 at 20:57

How to scroll 50px beyond a

1 Answers1