Scrolldown after clicking button javascript

Question

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.

Why not just using anchor tag <a href="sectionId"> instead of button — ullas kunder
– ullas kunder, Commented Jun 28, 2022 at 8:57

John · Accepted Answer · 2022-06-28 08:57:11Z

2

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>

answered Jun 28, 2022 at 8:57

John

4512 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mizerito75 Over a year ago

Thanks, I didn't know I could do like this.

John Over a year ago

Best way to learn is by asking questions! Keep going brother!

Mina · Accepted Answer · 2022-06-28 09:02:16Z

0

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

edited Jun 28, 2022 at 9:02

answered Jun 28, 2022 at 8:56

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

Scrolldown after clicking button javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related