Scroll top on multiple elements

Question

I have an accordion from Bootstrap 4 where I want when I click any of the accordion's tabs the page scrolls to its section.

$('.toggling-tabs').on('click', function () {
    if ($('.sections').hasClass('collapsing')) {
        $('html, body').animate({
                scrollTop: $('.sections').offset().top
            },
            'slow');
    }
});

I got this jQuery snippet where it works with only one of the tabs of the accordion. .toggling-tabs is the class for the accordion tabs and .sections is the class for the sections where when pressing any tab the page should scroll to.

How can I make the code work for all the tabs when any is clicked either using JS or jQuery.

Update:

<div class="col-lg-3 col-md-6 col-sm-12 toggling-tabs">
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
        <i class="fa fa-home d-block pb-2"></i> Home
    </div>
</div>

<!-- Some stuff in between -->


<section class="collapse show sections" id="home">
   <div class="card card-body bg-primary text-white py-5 banner">
      <h2>Welcome to my portfolio</h2>
    </div>
</section>

<section class="collapse collapsing sections" id="resume">
    <div class="card card-body bg-success text-white py-5">
        <h2>My Resume</h2>
    </div>
</section>

In order to help you better, could you please share the outline of your html? Thanks! — dferenc, Jan 07 '18 at 15:54
@dferenc the accordions are in a div at the top of the page. And the sections it reveals are in the center of the page. I want that if the user clicks any the page scrolls to related section. And if then the user scrolls up and press any it scrolls to the related div as well and so on. — Tes3awy, Jan 07 '18 at 15:57

dferenc · Accepted Answer · 2018-01-07T23:07:01.973

Assuming you use the data-target attribute on the .toggling-tabs items, you can obtain the target in the event handler via $(this).data('target'). Than you can scroll to the element by id.
Now, to make the toggling working as expected, do it via javascript and remove the data-toggle attributes from the tags. Below is a working example.

$('.toggling-tabs [data-target]').on('click', function(event) {
    var target = $(this).data('target');
    
    $('.collapse:not(' + target + ')').collapse('hide');
    $(target).collapse('show');

    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 'slow');
});

#placeholder {
    height: 150vh;
    background-color: light-grey;
}

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-12 toggling-tabs">
            <div class="port-item p-4 bg-primary" data-target="#home">
                <i class="fa fa-home d-block pb-2"></i> Home
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-12 toggling-tabs">
            <div class="port-item p-4 bg-success" data-target="#resume">
                <i class="fa fa-home d-block pb-2"></i> Resume
            </div>
        </div>
    </div>
</div>

<div id="placeholder">
</div>

<section class="collapse sections" id="home">
   <div class="card card-body bg-primary text-white py-5 banner">
      <h2>Welcome to my portfolio</h2>
    </div>
</section>

<section class="collapse sections" id="resume">
    <div class="card card-body bg-success text-white py-5">
        <h2>My Resume</h2>
    </div>
</section>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

I don't know if there is something wrong. But the first tab scrolls like a charm but the rest of tabs scroll to the very bottom of the page!!! — Tes3awy, Jan 07 '18 at 23:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162704/discussion-between-tes3awy-and-dferenc). — Tes3awy, Jan 07 '18 at 23:18

score 0 · Answer 2 · edited Feb 28 '19 at 18:28

0

$('.toggling-tabs').on('click', function () {
  $('html, body').animate({
    scrollTop: $('.sections').offset().top
  },
  'slow');  
});

in your code it checks whether it has class collapsing i removed that so now it will work for all class section

edited Feb 28 '19 at 18:28

brooksrelyt

3,482
4
22
42

answered Jan 07 '18 at 15:47

jasinth premkumar

1,358
1
9
22

the accordions are in a div at the top of the page. And the sections it reveals are in the center of the page. I want that if the user clicks any the page scrolls to related section. And if then the user scrolls up and press any it scrolls to the related div as well and so on. – Tes3awy Jan 07 '18 at 15:56
you can use href=id of repective div – jasinth premkumar Jan 07 '18 at 15:57

Scroll top on multiple elements

2 Answers2