Smooth scroll from one page to another

Hi, the smooth scrolling is working good on my home page.

  • [home]
  • [what we do]
  • [our story]
  • [design]
  • [contact]

So, ‘what we do’ and ‘our story’ are part of my home page and it works, but how to make that work when I am on my contact or design page?

This is .js code:

let smoothScroll =(targetEl)=>{
    const targetDistance= targetEl.offsetTop;

    window.scrollTo({
        left:0,
        top:targetDistance,
        behavior: "smooth"
    })
}


const wwd= document.getElementById("wwd");
const ourstory= document.getElementById("story");

const secondpage=document.getElementById("second-page");
const thirdpage=document.getElementById("third-page");



 wwd.addEventListener("click", function(event){
     event.preventDefault();
     smoothScroll(secondpage);

 } )


 ourstory.addEventListener("click", function(event){
    event.preventDefault();
    smoothScroll(thirdpage);

} )

var backToTop= document.getElementById("back-top");

let back = ()=>{
    if(window.scrollY>700){
        backToTop.classList.remove("hid");
        backToTop.classList.add("backtotop");
        
    } else {
       backToTop.classList.add("hid");
       backToTop.classList.remove("backtotop");
    }
}
window.onscroll=function(){
  
    back();
  
}

Now on my contact page I added these links:

   <li><a id="home" href="index.html">home</a></li>
              <li><a id="wwd" href="index.html#second-page">what we do</a></li>
              <li><a id="story" href="index.html#third-page">our story</a></li>
              <li><a id="designpage" href="/design.html">design</a></li>
              <li><a id="contactpage" href="#">contact</a></li>

Could anyone help me out here please? What am I doing wrong? I also tried with ‘index.html#secondpage’ but it doesn’t work…