CODEWITHSUNDEEP
javascriptfunctionscroll
tomgru23
tomgru23

Reputation: 109

Determining position of the element in JS - mobile vs. desktop

I have done a scroll function in JS which determines position of the element on a page and on clicking one of the anchor tags in the header, it takes you to the particular section of the page. It works perfectly fine on desktop, although it doesn't work properly on mobile. When I click, let's say, on Gallery it takes me to the middle of the Gallery section even though JS reads same position on desktop and mobile. Any ideas how to fix this?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>
    <ul class="nav-left">
        <li><a class="anchor-About" href="#">Über mich</a></li>
        <li><a class="anchor-Gallery" href="#">Galerie</a></li>
    </ul>
   <a class="anchor-Home" href="#"> <img src="styles/Images/logo.png" id="logo" alt=""></a>
    <ul class="nav-right">
        <li><a class="anchor-Contact" href="#">Kontakt</a></li>
    </ul>
<section id="About"></section>
<section id="Gallery"></section>
<section id="Contact"></section>
</header>
</body>
</html>

    section {
  height: 100vh;
}

#About {
  background-color: red
}

#Gallery {
  background-color: black
}

#Contact {
  background-color: blue
}

const sectionAboutNav = document.querySelector('.anchor-About');
const sectionGalleryNav = document.querySelector('.anchor-Gallery');
const sectionContactNav = document.querySelector('.anchor-Contact');

const sectionAbout = document.getElementById('About')
const sectionGallery = document.getElementById('Gallery')
const sectionContact = document.getElementById('Contact')
const sectionAboutPosition = sectionAbout.getBoundingClientRect().top + sectionAbout.ownerDocument.defaultView.pageYOffset;
const sectionGalleryPosition = sectionGallery.getBoundingClientRect().top + sectionGallery.ownerDocument.defaultView.pageYOffset;
const sectionContactPosition = sectionContact.getBoundingClientRect().top + sectionContact.ownerDocument.defaultView.pageYOffset;

function smoothScroll(duration, sectionPosition){
  const trgtPosition = sectionPosition;
  const startPosition = window.pageYOffset;
  const distance = trgtPosition - startPosition;
  let startTime = null;


  function animationScroll(currentTime){
    if(startTime === null) startTime = currentTime;
    const timeElapse = currentTime - startTime; 
    const run = ease(timeElapse, startPosition, distance, duration);
    window.scrollTo(0, run);
    if(timeElapse < duration){requestAnimationFrame(animationScroll)};
  }

  function ease (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  };
    requestAnimationFrame(animationScroll);
  }
  sectionAboutNav.addEventListener('click', function(e){
  e.preventDefault();
  smoothScroll(500, sectionAboutPosition);
  console.log(sectionAboutPosition + 'this is position of about me section')
})
sectionGalleryNav.addEventListener('click', function(e){
  e.preventDefault();
  smoothScroll(500, sectionGalleryPosition);
  console.log(sectionGalleryPosition + 'this is a position of gallery section')
})
sectionContactNav.addEventListener('click', function(e){
  e.preventDefault();
  smoothScroll(500, sectionContactPosition);
  console.log(sectionContactPosition + 'this is a position of contact section')
})

Upvotes: 0

Views: 82

Answers (1)

Artyom
Artyom

Reputation: 46

Most likely, the reason is that you are calculating the offset top (constants «section[*]Position») not at the moment you click on the button, but at the moment the script is loaded.

To solve the problem, transfer the above constants to the «click» event listener.

Upvotes: 1

Related Questions