CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Janath
Janath

Reputation: 1248

Bootstrap collapse scroll to bottom issue

I have a bootstrap collapse panel. In there I have placed toggle link bottom of the content so it will go down and up when click that link.

The problem

I have a long list of content. I need to move users to top when they click toggle. But in here, when I expand the menu and click collapse, it will go all the way to bottom of the page. Instead of I need to move users to the top of the page. I tried to set offset top but no luck.

Any idea?

My Jquery

$('html,body').animate({
     scrollTop: $(".collapsed").offset().top
 },500);

jsfiddle

Upvotes: 0

Views: 485

Answers (2)

Ivan Karaman
Ivan Karaman

Reputation: 1234

if I correctly understood, you need to scroll top when collapse area is hidden, try to use this. The collapse has hide.bs.collapse event that fires immediately when the hide method has been called, default interval for the collapse is 350ms, as you won't see the end of your site, scroll interval should be less than the default.

Sorry for my bad english...

Update

I re-read all comments, your problem is that you try to scroll to toggle button instead collapse area, you scroll to the button when area not closed and it is on the bottom, just scroll to panel-collapse....

$(document).ready(function() {
  $('.panel-collapse').on('hide.bs.collapse show.bs.collapse', function(e) {
  	$('html, body').animate({
      scrollTop: $(e.target).offset().top - 20
    }, 150);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
  <div class="col-md-6 col-sm-6 col-xs-6">
    <div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
         <p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>
      Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
    </p>
    <p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
      </div>
    </div>
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
  </div>
  <div class="panel panel-default" id="panel1">
    
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
         <p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>
      Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
    </p>
    <p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
      </div>
    </div>
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
  </div>
  <div class="panel panel-default" id="panel1">
    
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
         <p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>
      Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
    </p>
    <p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
      </div>
    </div>
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
  </div>
  </div>
  <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a po</p>
 </div>
 
 <!-- dib -->
  <div class="col-md-6 col-sm-6 col-xs-6">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
   
  </div>
</div>
<br><br><br><br><br><br><br><br>
<!-- roew -->
<div class="row">
  <div class="col-md-12">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
  </div>
</div>
</div>

Upvotes: 1

Jan
Jan

Reputation: 2853

You can achieve the scrolling by attaching an event-listener to the toggle-element and then checking the classes of the pannel-collapse element.

$('#accordion .panel-heading a').on('click', function (event) {
  let panelCollapse = $(this).closest('.panel').find('.panel-collapse');
  if (!panelCollapse.hasClass('collapse')) {
    $('html, body').animate({
      scrollTop: panelCollapse.offset().top
    }, 500);
  }
});

Upvotes: 1

Related Questions