I have been working on implementing a JavaScript jQuery script with active nav links and smooth scrolling. It is supposed highlight the nav link when you scroll to a corresponding section (using anchor link) and then also when the user click an navitem it is supposed to highlink that link and scroll to its section. However that only works when, on the index.html page, not cv.html page.
The problem I'm facing is a "Uncaught TypeError: $(...).offset() is undefined", here is a link to the site:
http://jona09h34.web.videndjurs.dk/.
The error can be reproduced when on CV.html and trying to navigate back to index.html using either of the links (Om mig, Projekter or Kontakt) (translated: About me, Projects, Contact)
EDIT: Rewrote the question, adding a link the site I have problem with.
The code seems to work for me but try changing your browser or script tag. I'd recommend this one:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Your immediate problem:
First of all - check the destination URL in the bottom left of your browser when you hover over the navigation links on the CV page. Notice how they point to to the cv page with the # appended, but all your content is on your index page.
Your activeLink.js file is listening for clicks on those nav elements and then using the hash value to find the top of a matching <div> and scroll to it. But those target divs only exist on your homepage, not your CV page.
You have a couple of options to fix it. The quickest way would be to modify your javascript to check the current window.location and only fire your "smooth scrolling" code if it's on the homepage.
Fixing it a different way:
You could go a step further and remove all the javascript that handles page scrolling (lines 10-48 in your activeLink.js) and let CSS do it. You could add the following to your css:
html {
scroll-behaviour:smooth;
scroll-padding-top: 100px;
}
scroll-padding-top lets you specify an offset to account for your fixed header. You'll need to modify that value and probably add a media query so it works for your smaller mobile header too.
Now, you need change your navigation links so they still work regardless of the page you are on. Rather than just <a href="#about">Om mig</a>, add the full path: <a href="index.html#about">Om mig</a>. Now if you click the link when you're not on index.html, you'll load the correct page. The smooth scrolling will kick in and you'll be taken to the correct anchor.