CSS only smooth scrool with offset?

Question

Im using the classic anchor tag approach to click and scroll to a specific div

<a href="#scrollTo"></a>
<div id="scrollTo"></div>

The problem that im facing is that this approach scrolls till the div top margin in on the top of the screen. Is there a way of scrolling it only galf the way with css only, or I will have to use javscript?

score 1 · Accepted Answer · edited Dec 18 '20 at 13:38

1

You can use another element inside the div. If you place a positioned element inside the scrollto div with a negative margin. The negative margin will be the offset you want. Make the inner element have a height of 0px, that way it won't be visible to your users.

You will need to put the id on that element of course.

<div id="olddiv">
    <div id="scrollTo" style="margin-top: -100px"></div>
</div>

edited Dec 18 '20 at 13:38

Ahmad Habib

2,053
1
13
28

answered Dec 16 '20 at 18:57

axwr

2,118
1
16
29

Hey, this doesnt work because I still need the content inside scrollTo to be visible, and it only become visible when the anchor tag is clicked – Bruno Pigatto Dec 17 '20 at 01:11
@BrunoPigatto put the content inside "olddiv" beneath "scrollTo" not inside the "scrollTo". – axwr Dec 17 '20 at 01:31

score 0 · Answer 2 · answered Dec 16 '20 at 18:59

0

You can look at using an offset on the div you are using for the anchor: offsetting an html anchor to adjust for fixed header

answered Dec 16 '20 at 18:59

Jesse Holden

39
1
4

CSS only smooth scrool with offset?

2 Answers2