Soy un novato de JavaScript. Usando un código de plantilla gratuito para construir una página web. Tengo un fragmento que vuelve a la parte superior que funciona perfectamente, pero el problema es que agrega "#" a la URL cuando hago clic en él. Y cuando hago clic en el botón Atrás del navegador, tuve que hacer clic dos veces, ya que elimina el hash en el primer clic y luego hago clic nuevamente para ir a la página anterior, lo cual es bastante molesto. Aunque hay toneladas de ejemplos de jQuery para lograr esto, no quiero agregar jQuery y usar solo el JavaScript que tengo. Aquí está el código. ¿Hay alguna forma de eliminar "#" de la URL cuando hago clic en el ancla de desplazamiento hacia arriba? Intenté cambiar la etiqueta de anclaje a botón también, pero no pude lograr que funcionara. Ayuda por favor
HTML
<a href="#" class="back-to-top"><i class="bi bi-arrow-up-short"></i></a>JS
(function () { /** * Easy selector helper function */ const select = (el, all = false) => { el = el.trim() if (all) { return [...document.querySelectorAll(el)] } else { return document.querySelector(el) } } /** * Easy event listener function */ const on = (type, el, listener, all = false) => { let selectEl = select(el, all) if (selectEl) { if (all) { selectEl.forEach(e => e.addEventListener(type, listener)) } else { selectEl.addEventListener(type, listener) } } } /** * Easy on scroll event listener */ const onscroll = (el, listener) => { el.addEventListener('scroll', listener) } /** * Back to top button */ let backtotop = select('.back-to-top') if (backtotop) { const toggleBacktotop = () => { if (window.scrollY > 100) { backtotop.classList.add('active') } else { backtotop.classList.remove('active') } } window.addEventListener('load', toggleBacktotop) onscroll(document, toggleBacktotop) } })();Para evitar que se agregue el # a la URL, puede usar preventDefault para evitar el comportamiento predeterminado del enlace de anclaje:
document.querySelector('a').addEventListener('click', (event) => { event.preventDefault(); window.scrollTo(0, 0); }); .spacer { width: 100%; height: 150vh; border: 1px dashed black; } <div class="spacer"></div> <a href="#">Back to Top</a> o use window.scroll para un comportamiento de desplazamiento suave nativo (pero tenga cuidado con el soporte del navegador )
document.querySelector('a').addEventListener('click', (event) => { event.preventDefault(); window.scroll({ top: 0, behavior: 'smooth' }); }); .spacer { width: 100%; height: 150vh; border: 1px dashed black; } <div class="spacer"></div> <a href="#">Back to Top</a>¿Responde esto a tu pregunta?
Haz una función onClick con esta muestra:
window.scrollTo(0, 0);Puede usar JavaScript para desplazarse hasta la parte superior:
backtotop.addEventListener("click", () => { window.scrollTo({top: 0}); return false; });