CODEWITHSUNDEEP
javascript
Mizerito75
Mizerito75

Reputation: 25

Scrolldown after clicking button javascript

For my website, i would like to scrolldown automatically to an article when the user click on a button category.

Here is my twig code. `

                    {% 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>`

And this is my JS part.

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.

Upvotes: 0

Views: 49

Answers (2)

Mina
Mina

Reputation: 17584

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" });
    }
   )}
  });

Upvotes: 0

John
John

Reputation: 451

How about a non-JS solution?

To do this with JS you would have to do a querySelectorAll on all of the buttons and add an event listener on each, then query the respective contentId div then scroll to it.

A non-JS solution can be like this:

 {% 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>

Upvotes: 2

Related Questions