¿Alguien de ustedes se ha encontrado con un problema similar al mío? Tengo enlaces en una página de mi sitio web que redirigen a la segunda página donde tengo un menú que muestra una opción de menú a la vez. De forma predeterminada, la primera opción está visible cuando abro la segunda página. Pero, ¿cómo puedo obtener un resultado cuando hago clic en un enlace como este para mostrar el div oculto y desplazarme hacia abajo hasta la parte específica del contenido de los divs?
Enlace en la primera página. Se supone que debe cargar la opción 4 y desplazarse hacia abajo para anclar #extrainformation.
<div class="linktosecondpage" onclick="window.open('http://localhost/mypage/secondpage#extrainformation','_self');"> </div>¿Cómo se ve el menú en la segunda página?
https://jsfiddle.net/wmr03zno/3/
He considerado escribir una función para cada enlace que se activa cuando se hace clic en el enlace, redirige a la segunda página, muestra la opción oculta de la página, elimina y agrega clase a h4 y se desplaza hacia abajo hasta el ancla deseada (#información adicional). Esa es la idea que tengo ahora mismo. Solo me preguntaba si hay una solución más fácil para este tipo de problema.
Mi idea será leer el hash del enlace y, si existe un elemento con el hash dado, desplácese hasta él.
en la primera página tendrá un enlace como:
<a href="https://example.com/subpage/#anchor">anchor</a> y en la segunda página necesitará algo como esto: cuando la página esté lista, el estado se cambiará a interactive , verifique si el enlace contiene un ancla ( location.hash ) y si contiene, pruebe la función scrollToElement() .
En la función, verifique si existe el elemento con el ancla dada y, si existe, muéstrelo y desplácese hasta él.
const scrollToElement = (id) => { const element = document.querySelector(id); if (element !== null) { element.classList.remove('hidden'); element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); } }; document.onreadystatechange = () => { if (document.readyState === 'interactive') { if (location.hash !== '') { scrollToElement(location.hash); } } }; .hidden { display: none; } <div style="height: 2000px"></div> <div id="anchor" class="hidden">anchor</div>Esto implica un poco de JavaScript. Al cargar, puede buscar la Ubicación: hash (que ya tiene en su URL). Hacer cosas a la página. En mi ejemplo, creo el elemento que obtiene el hash y luego uso Element.scrollIntoView() para navegar hasta ese elemento.
window.location.hash = 'test'; // For testing. This has already been set in the URL. document.addEventListener('DOMContentLoaded', e => { // find the hash let hash = window.location.hash.slice(1); // slice: remove the '#' // add a new element (or make is visible etc.) document.querySelector('main').innerHTML = `<h2 id="${hash}">${hash}</h2>`; // scroll to the anchor document.querySelector(`#${hash}`).scrollIntoView(); }); main { height: 2000px; position: relative; } h2#test { position: absolute; top: 1000px; } <main><main>He estado pensando en ello y probando cosas. Probé las soluciones anteriores respondidas por @ ciekals11 y @chrwahl, pero no pude hacer que funcionaran. Probablemente porque soy demasiado aficionado con js/Jquery.
De todos modos, mi solución se ve así.
$(document).ready(function() { if ( window.location.href == "http://localhost/mypage/secondpage#extrainformation" ) { $(".tabs h4").removeClass("tab-current"); $(".tabs ul li:nth-child(4) h4").addClass("tab-current"); $("#section1").fadeOut(); $("#section4").fadeIn(); $([document.documentElement, document.body]).animate({ scrollTop: $("#extrainformation").offset().top }, 1000); return false; } });Probablemente esta no sea la mejor respuesta, pero funciona. Cualquier otra recomendación y solución es bienvenida.