Para mi sitio web, me gustaría desplazarme hacia abajo automáticamente a un artículo cuando el usuario haga clic en una categoría de botón.
Aquí está mi código ramita. `
{% if category is not null and category|length > 0 %} {% for categorie in category %} <li class="nav-item category-link"> <button class="nav-link active" categoryId="{{categorie.id}}">{{categorie.name}}</button> </li> {% endfor %} {% endif %} </ul> </div> </div> </nav> <div class=""> {% for content in contents %} <div contentId="{{content.id}}"> <h2 class="text-center">{{content.title}}</h2> </div>`Y esta es mi parte JS.
var contentId = document.querySelector('div').getAttribute('contentId'); var categoryId = document.querySelector("button").getAttribute('categoryId'); if(categoryId){ categoryId.addEventListener('click', function() { if (contentId === categoryId){ window.scrollTo(contentId); } }); }``` For information, actually in my database contentId related to categoryId have the same value. But for future they may not have the same value. Thanks a lot for your help.¿Qué tal una solución que no sea JS?
Para hacer esto con JS, tendría que hacer un querySelectorAll en todos los botones y agregar un detector de eventos en cada uno, luego consultar el div contentId respectivo y luego desplazarse hasta él.
Una solución que no sea JS puede ser así:
{% if category is not null and category|length > 0 %} {% for categorie in category %} <li class="nav-item category-link"> <a href="#{{categorie.id}}" class="nav-link active" categoryId="{{categorie.id}}">{{categorie.name}}</a> </li> {% endfor %} {% endif %} </ul> </div> </div> </nav> <div class=""> {% for content in contents %} <div id="{{content.id}}" contentId="{{content.id}}"> <h2 class="text-center">{{content.title}}</h2> </div>const contents = document.querySelectorAll('div[contentId]') const categories = document.querySelectorAll("button[categoryId]") categories.forEach(category => { category.addEventListener('click', function() { const categoryId = category.getAttribute('categoryId'); const content = Array.from(contents).find(content => content.getAttribute('contentId') === categoryId) if (content){ content.scrollIntoView({ behavior: "smooth" }); } )} });