bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed the anchor offset issue.

Browse source
This commit is contained in:
Bob Vandevliet 2024-07-29 17:17:52 +02:00
parent 35f1c3a9e8
commit 4c68d18b10
2 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
public/index.html
View file

@ -26,7 +26,7 @@
<main> <main>
<section class="container-xxl"> <section class="container-xxl">
<h2 class="section text-center" id="section-services">FPV drone opnames laten maken</h2> <h2 class="text-center" id="section-services">FPV drone opnames laten maken</h2>
<div class="row text-center"> <div class="row text-center">
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<div class="card h-100"> <div class="card h-100">
@ -102,7 +102,7 @@
</section> </section>
<section class="container-xxl"> <section class="container-xxl">
<h2 class="section text-center" id="section-fpv">Wat is FPV?</h2> <h2 class="text-center" id="section-fpv">Wat is FPV?</h2>
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<p> <p>
@ -119,8 +119,9 @@
</section> </section>
<section class="container-xxl"> <section class="container-xxl">
<div id="section-about"></div>
<div class="card h-100 bg-light text-dark"> <div class="card h-100 bg-light text-dark">
<h2 class="section card-title text-center mt-4" id="section-about">Over mij</h2> <h2 class="card-title text-center mt-4">Over mij</h2>
<div class="row g-0"> <div class="row g-0">
<div class="col-lg-6 gradient-to-top-light"> <div class="col-lg-6 gradient-to-top-light">
<img class="card-img" style="object-position: left;" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="Afbeelding van mezelf terwijl ik een FPV drone bestuur."> <img class="card-img" style="object-position: left;" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="Afbeelding van mezelf terwijl ik een FPV drone bestuur.">
@ -146,7 +147,7 @@
</section> </section>
<section class="container-xxl"> <section class="container-xxl">
<h2 class="section text-center" id="section-wow">Werkwijze</h2> <h2 class="text-center" id="section-wow">Werkwijze</h2>
<div class="row text-center"> <div class="row text-center">
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<h3> <h3>

17
src/js/scripts.js
View file

@ -28,17 +28,20 @@ document.addEventListener('DOMContentLoaded', () =>
/** /**
* @type {NodeListOf<HTMLElement>} * @type {NodeListOf<HTMLElement>}
*/ */
const sections = document.querySelectorAll('.section'); const sections = document.querySelectorAll('section');
sections.forEach(section => sections.forEach(section =>
{ {
if (section.id) const anchorTarget = section.querySelector('[id^="section-"]');
const anchorHeader = section.querySelector('h1,h2');
if (anchorTarget && anchorHeader)
{ {
const anchor = document.createElement('a'); const anchorLink = document.createElement('a');
anchor.className = 'anchor-link'; anchorLink.className = 'anchor-link';
anchor.href = `#${section.id}`; anchorLink.href = `#${anchorTarget.id}`;
anchor.innerHTML = ' #&nbsp;'; anchorLink.innerHTML = ' #&nbsp;';
section.appendChild(anchor); anchorHeader.appendChild(anchorLink);
} }
}); });