How to add a href with a specific scroll amount-CodePudding

So I know that you can link hrefs to sections with ids

example=

<a id="example1">example</div>
<a id="example2" href=#example1>example2>

which makes the text "example2" scroll to "example1" when clicked, but I was wondering if there was a way to make it so its a amount of scroll not necessarily to a id. More context: I have sections on my website and when I make it to the id it goes a bit to high so how do I make it lower.

PS: sorry im really bad at explaining and i hope its understandable.

CodePudding user response：

I suggest taking a look at this article for two easy methods.

Here is one of the methods they suggested:

HTML

<a id="example1">example</div>
<a id="example2" href=#example1>example2>

CSS

#example1::before { 
  display: block; 
  content: " "; 
  margin-top: -200px; 
  height: 200px; 
  visibility: hidden; 
  pointer-events: none;
}

Hope this helps!

CodePudding user response：

Using the id to scroll between sections also works fine.

<a id="example1">example</a>
<br />
<a id="example2" href=#example1>example2</a>

And if it scroll little bit higher to the position, you can style it like this also https://snippets.cacher.io/snippet/8de5c03cae9ceb8d4c64