Issue with scrolling to the bottom of collapsed sections in Bootstrap

Question

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click.

The Issue

My problem arises when the menu expands, causing it to scroll all the way to the bottom of the page instead of staying at the top where I want users to be. I've tried setting an offset top but haven't had any success.

Does anyone have any suggestions on how to resolve this issue?

My JQuery Code

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

View My jsfiddle Here

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

In my understanding, if you want to scroll to the top when the collapse area is hidden, you can try using this method. The collapse event hide.bs.collapse triggers immediately when the hide method is called, with a default interval of 350ms. Since you won't see the end of your site, the scroll interval should be less than the default.

I apologize for any mistakes in my English...

Update

After reviewing all the comments, it seems that the issue lies in trying to scroll to the toggle button instead of the collapse area. When the area is not closed and at the bottom, simply scroll to the 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);
  });
});

Answer 2

In my understanding, if you want to scroll to the top when the collapse area is hidden, you can try using this method. The collapse event hide.bs.collapse triggers immediately when the hide method is called, with a default interval of 350ms. Since you won't see the end of your site, the scroll interval should be less than the default.

I apologize for any mistakes in my English...

Update

After reviewing all the comments, it seems that the issue lies in trying to scroll to the toggle button instead of the collapse area. When the area is not closed and at the bottom, simply scroll to the 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);
  });
});

Answer 3

Answer №2

To enable the scrolling feature, you can set up an event listener for the toggle element and then monitor the classes of the collapsible panel.

$('#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);
  }
});

Answer 4

To enable the scrolling feature, you can set up an event listener for the toggle element and then monitor the classes of the collapsible panel.

$('#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);
  }
});

Issue with scrolling to the bottom of collapsed sections in Bootstrap

Answer №1

Answer №2

Similar questions

JavaScript code to determine if a Rating is enabled for a SharePoint Online list

Finding the closest button using Selenium in Python

Using Laravel to remove data with an incorrect ID

At what times do screen reader users utilize tabs?

Discover properties of a TypeScript class with an existing object

What is the best way to remove the box-model from an element?

In a two-column layout, ensure that the text in the left box is aligned to the left and the text in the right box is aligned to the

Having trouble getting webpack and babel to start using npm

Having trouble transmitting JSON data to an Express server through the browser

Filtering dropdown lists using JQuery

Is there a way to make the text on my Bootstrap carousel come alive with animation effects?

Is node.js required for utilizing Angularjs?

I keep encountering the error message "$(".dropdown-toggle").dropdown is not a function" while attempting to use Dropdowns with Jade and Bootstrap

Is it necessary to have col-xs-12 in Bootstrap 3?

Trigger a jQuery event when a different selection is made in the dropdown menu

Vue.js component still not transitioning out despite using mode="out-in"

When using Next.js revalidate, an error may occur stating: "There are keys that require relocation: revalidate

Interactive PNG Sequence Rotation: Explore 360 Degrees

Using the Match() function with an array of objects

`Unable to process JSON information from Google Places`