How can I specify a margin to a chapter reference link in HTML?-CodePudding

I have a body with an header (100px), and a container with a magin (100px). Like this :

.myHeader {
  height: 100px;
}

.myContainer {
  margin-top: 100px;
}

I'm writing some texts with chapters and i refers some chapters with a button.

<a href={`#${chapter.step}`}>
    <Button key={chapter.id} >
       {chapter.name}
    </Button>
</a>

On the text side, i have obviously a <div id="chapterId">...text</div>.

This works well, except the fact that the link leads me to the top of the page, behind the header.

How I can specify the reference to begin at a certain height ?

Thank you

CodePudding user response：

From what I can collect from your post, and I'm not sure I'm correct because you provided a somewhat vague information, you are trying to keep the container 100px from the top of the window, so that the header remains visible. Referring to the window boundaries usually requires position: fixed;. Here is an example that looks like what I think your description refers to:

body {
  margin: 0;
}

.myHeader {
  height: 100px;
  margin: 0;
  background: blue;
  text-align: center;
  font: 50px/100px serif;
}

.myContainer {
  position: fixed;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<h2 >
  Header
</h2>
<section >
  <a href="#Chapter_2">Jump to Chapter 2</a>
  <h3 id="Chapter_1">Chapter 1</h3>
  Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. 
  
  <h3 id="Chapter_2">Chapter 2</h3>
  Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. 
</section>