He creado un sitio y tengo enlaces ancla en la parte superior del sitio. En una computadora, cuando presiono un enlace, se desplaza a la sección dada sin problemas, pero en un teléfono simplemente salta directamente a la sección. Originalmente usé scroll-behavior: smooth, pero implementé código JavaScript en su lugar porque pensé que eso podría solucionar el problema; no lo hizo A continuación, he adjuntado mi código html y el código JavaScript que estoy usando actualmente:
<nav class="nav"> <h6 id="site">website.net</h6> <ul class="nav__links"> <li class="nav__item"> <a href="#about" class="link">About</a> </li> <li class="nav__item"> <a href="#experience" class="link">Link2</a> </li> <li class="nav__item"> <a href="#skills" class="link">Link3</a> </li> <li class="nav__item"> <a href="#projects" class="link">Link4</a> </li> </ul> <div class="hidden--btn menu--btn"> <div class="menu-btn__burger"></div> </div> </nav>JavaScript:
const nav = document.querySelector('.nav'); /*scroll animation */ const scrollTo = function (e) { e.preventDefault(); const target = e.target; if (target.classList.contains('link')) { const id = target.getAttribute('href').slice(1); document.getElementById(id).scrollIntoView({behavior: "smooth"}); } if (target.classList.contains('hamburger--link')) { const id = target.getAttribute('href').slice(1); document.getElementById(id).scrollIntoView({behavior: "smooth"}); hamburgerBin.classList.toggle('hidden--two'); } } nav.addEventListener('click', scrollTo);