Smooth scroll to another page's section

Question

I'm trying to smooth scroll to a section on another page and of course if you want to do that, you have to add the target URL with its section ID. However, if you just do this alone, it becomes so janky that it jumps to the section and flashes white before it reaches there. So now, I'm trying to see how smooth scrolling could be implemented.

I've followed this solution here to implement a smooth scroll and it did not work. It seems like the JS code just doesnt activate for some reason. I will click on the link on my site and the website will not direct itself to the section. Pretty much nothing happens. If I comment out the js code, its back to normal and it works but its just with the janky performance issue and no smooth scrolling. I'm not sure if more JavaScript is required or the way that I'm doing it is the problem. The link is accessed through an iframe so maybe thats the issue.

Here is my site: https://tempest-digital.io/

If you scroll down to the bottom where it says "Projects" and you click on it, then click on "Read More" in the part that says "Project 01". This is where the link is thats supposed to lead to the section on the other page. Here you can see what I mean where the link doesnt work. If this is not possible to do within an iframe, I am fine with that. I had just preferred putting my particular projects section in an iframe.

Here is a section of the code that is supposed to target the section on another page and apply smooth scrolling.

HTML

<div id="portfolio-holder" class="popup popup-fullscreen">
  <button class="go-back"><i class="fa-solid fa-circle-arrow-right"></i></button>
  <iframe src="portfolio.html"></iframe>
</div>

HTML for portfolio.html

<div class="box">
        <img src="Images/game-design.png" alt="">
        <div class="content">
            <h3>project 01</h3>
            <p>This is my game design portfolio where I have created both 3D and 2D games both in Unity and GameMaker Studio 2.
                These are uploaded on itch.io, a website made for game developers to advertise their work. 
            </p>
            <a href="./index.html#itch">read more</a>
        </div>
    </div>

JS

$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {

  if (this.hash !== "") {
    // Prevent default anchor click behavior
    event.preventDefault();

    var hash = this.hash;

    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  }
});

});

Answer 1

have you installed jquery, if not you can install it here Jquery