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>
<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="col-sm-6 col-lg">
<div class="card h-100">
@ -102,7 +102,7 @@
</section>
<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="col-md">
<p>
@ -119,8 +119,9 @@
</section>
<section class="container-xxl">
<div id="section-about"></div>
<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="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.">
@ -146,7 +147,7 @@
</section>
<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="col-sm-6 col-lg">
<h3>

17
src/js/scripts.js
View file

@ -28,17 +28,20 @@ document.addEventListener('DOMContentLoaded', () =>
/**
* @type {NodeListOf<HTMLElement>}
*/
const sections = document.querySelectorAll('.section');
const sections = document.querySelectorAll('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');
anchor.className = 'anchor-link';
anchor.href = `#${section.id}`;
anchor.innerHTML = ' #&nbsp;';
section.appendChild(anchor);
const anchorLink = document.createElement('a');
anchorLink.className = 'anchor-link';
anchorLink.href = `#${anchorTarget.id}`;
anchorLink.innerHTML = ' #&nbsp;';
anchorHeader.appendChild(anchorLink);
}
});