Bonjour,
Si on connait la hauteur du haut de page a priori (ou que l'on est capable de le calculer avec une formule simple en css), on peut peut-être s'en sortir en mettant les ancres dans le contenu principal et en les positionnant en relatif en les remontant de la hauteur du haut de page.
Exemple ci-dessous, j'ai considéré que le haut de page faisait 6em, mais on aurait pu aussi le calculer en fonction par exemple du nombre de vw que fait la fenêtre (plus la fenêtre serait large, moins cette hauteur serait haute) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
body
{
margin:0;
padding:0;
}
header
{
position:fixed;
top:0;
background:#fff;
z-index:1;
padding:0.5em;
}
#reste-de-la-page
{
position:relative;
pointer-events:none;
padding:6em 0.5em 0.5em 0.5em;
}
#reste-de-la-page div
{
padding-top:0;
padding-bottom:1em;
margin:0;
position:relative;
top:-6em;
}
nav
{
padding:1em;
}
</style>
<script>
</script>
</head>
<body>
<header>
<div id="debut-de-la-page">
Sed vehicula augue eu tellus volutpat consequat. In ac eros gravida, blandit erat eget, scelerisque ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<nav>
<a href="#chap1">lien vers chap 1</a>
<a href="#chap2">lien vers chap 2</a>
<a href="#chap3">lien vers chap 3</a>
<a href="#chap4">lien vers chap 4</a>
<a href="#chap5">lien vers chap 5</a>
<a href="#chap6">lien vers chap 6</a>
</nav>
</header>
<div id="reste-de-la-page">
<div id="chap1"></div>
<p>
1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu purus tempor, maximus elit sed, cursus elit. Sed interdum, neque vel lobortis pharetra, quam dolor volutpat diam, placerat sodales est lectus vitae ipsum. Duis sed euismod velit, ac egestas ligula. Proin vitae justo ac nisi sagittis tristique non nec mauris. Maecenas aliquet commodo arcu, quis rutrum turpis vestibulum vel. Phasellus fringilla aliquet magna nec lobortis. Sed cursus nisi ac nunc vestibulum ultrices. Pellentesque euismod efficitur odio ut vulputate. Sed id enim fringilla, facilisis dolor in, aliquet felis. Donec pharetra nibh erat, vel tempor urna venenatis et. Pellentesque commodo mauris in dapibus tincidunt. Fusce eleifend risus ac sapien dictum tincidunt. Maecenas auctor orci diam, vitae laoreet velit consequat tristique. Praesent dapibus felis augue, et bibendum ligula interdum ac.
</p>
<div id="chap2"></div>
<p>
2) Donec vestibulum justo nunc, id porttitor velit auctor et. Maecenas luctus porta justo, sit amet gravida lacus tempor ac. Curabitur mollis lobortis dui quis interdum. Nam a turpis ullamcorper, consequat risus ac, bibendum mauris. Duis ut ligula commodo, vulputate neque ac, aliquet lectus. Morbi sodales rhoncus facilisis. Aliquam turpis ligula, maximus et augue quis, dignissim bibendum massa. Mauris volutpat a massa eu volutpat. In tristique velit vitae libero condimentum pulvinar. Aliquam nibh nisi, mollis quis nibh non, varius convallis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nulla elementum aliquet nibh nec commodo. Nulla id efficitur turpis. Etiam mollis massa aliquam libero placerat vulputate. Integer in enim feugiat arcu sagittis faucibus.
</p>
<div id="chap3"></div>
<p>
3) Sed vehicula augue eu tellus volutpat consequat. In ac eros gravida, blandit erat eget, scelerisque ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce non pharetra enim. Donec volutpat in mi lacinia faucibus. Nulla molestie elementum lobortis. Suspendisse potenti. Etiam feugiat condimentum metus. Aenean eget diam feugiat quam semper laoreet quis in dolor. Integer maximus elementum diam vestibulum luctus. Donec bibendum nisl nec neque blandit finibus. Fusce gravida volutpat tristique. Quisque vel massa at velit aliquam sollicitudin. Suspendisse convallis imperdiet quam non maximus.
</p>
<div id="chap4"></div>
<p>
4) Nunc tempus eros ac turpis dictum pellentesque. Duis feugiat nisl vestibulum, posuere justo id, egestas orci. Integer nisl erat, aliquet vitae mauris cursus, fermentum maximus felis. Nunc finibus felis eget convallis dignissim. Pellentesque ut erat purus. In quis posuere tortor. Nam et nibh scelerisque, ultrices felis a, semper metus. Duis dictum faucibus tortor at lobortis. Pellentesque pharetra elementum nibh, nec fringilla mi interdum commodo. Integer vitae posuere dui, vel aliquet leo. Proin placerat congue lacus et luctus. Suspendisse semper, dolor sed varius tristique, ligula magna fermentum nulla, et blandit massa nisi at tellus. Suspendisse turpis orci, porta sed aliquet venenatis, malesuada in leo.
</p>
<div id="chap5"></div>
<p>
5) Nunc tempor leo a felis imperdiet bibendum. Morbi a mauris sed quam posuere tincidunt. Aliquam sit amet libero eu nisl venenatis eleifend. Phasellus dui nibh, faucibus quis risus convallis, volutpat aliquet arcu. Nam tincidunt nunc in sapien tempor vulputate. Nam quis odio sit amet quam vulputate venenatis. Ut scelerisque tincidunt arcu sit amet pharetra. Donec neque velit, interdum vitae efficitur in, pharetra sit amet ligula. Nulla luctus ex id lorem commodo tincidunt. Nulla rhoncus magna in sollicitudin imperdiet. Fusce sed convallis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut quam pharetra mauris auctor volutpat vitae vel mi. Curabitur ultricies euismod eros, non dapibus velit hendrerit pellentesque.
</p>
<div id="chap6"></div>
<p>
6) Integer placerat odio erat, id facilisis eros pellentesque in. Phasellus viverra tellus nisi, nec ultricies felis tincidunt in. Aliquam eleifend eu ex egestas gravida. Maecenas fringilla egestas tristique. Sed laoreet, lorem sed viverra molestie, sapien enim euismod nisi, ut mattis tellus ligula nec odio. Duis facilisis sem at mi malesuada, egestas dictum eros consequat. Proin eu purus ut nunc congue vulputate. Mauris interdum hendrerit enim nec finibus.
</p>
</div>
</body>
</html>
Amicalement,
Modifié par parsimonhi (02 Apr 2021 - 12:37)