0

Tengo una tienda hecha con wordpress y estoy intentado añadir un script o algo que desplace la pagina hacia abajo cuando alguien pulsa en algun filtro, porque los filtros estan muy arriba y quiero que una vez se haga click, la pantlla sola se mueva hasta ese punto.

Mi intencion es hacerlo con javascript porque he visto que esos filtros de tipo <li> una vez haces click sobre ellos se convierten en <li class="checked">. Pretendo atrapar con document.getElementsByClassName("checked"); y hacer que entonces se mueva a una direccion con un enlace interno al punto donde empiezan los articulo de la tienda, donde he insertado un <div class="ancla">

2
  • 2
    Hola, bienvenido a SOes! Te recomiendo que completes el recorrido de bienvenida para conocer mejor la temática del sitio y por qué es recomendable proveer de un ejemplo mínimo verificable o al menos el código de lo que has intentado hasta ahora, te haya funcionado o no el 12 nov. 2020 a las 16:46
  • Por otra parte, si estás en la la página (por ejemplo) https://.../index.html, con añadir a la URL el ancla es suficiente: https://.../index.html#ancla el 12 nov. 2020 a las 16:47

1 respuesta 1

-1

Existe una forma bastante simple de hacerlo solo con html, a una etiqueta <a></a> puedes añadirle un href para que al hacer click este se desplace hacia la ubicación donde esta el elemento.

Aqui un ejemplo de hacerlo en HTML: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor

La documentación correspondiente:

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/a

https://developer.mozilla.org/en-US/docs/Web/API/Location/hash

De igual forma funciona en javascript. Puedes utilizar la propiedad window.location.hash para redirecionar la pagina al elemento deseado.

Puedes encontrar un ejemplo aquí http://jsfiddle.net/nick_craver/ntr5b/

EDIT 1: Gracias a los comentarios por orientarme con la documentación de mozilla, ahi agregue los 2 links que faltaban

2
  • 1
    Por favor considera agregar el ejemplo aquí con formato de snnipet, por otro lado existen fuentes de mas calidad para referenciar como: developer.mozilla.org/es/docs/Web/HTML/Elemento/a
    – user128299
    el 12 nov. 2020 a las 17:28
  • Si, tienes razón, aunque personalmente me gusta mas w3school al ser mas interactivo. Pero ciertamente tienes razón, lo editare ahora. el 13 nov. 2020 a las 18:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.