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

javascriptjqueryhtmlcsstwitter-bootstrap

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to using a Selector in a mixin in VUE

I'm attempting to create a Mixin that will help me calculate the offsetWidth of an element. Here is my Mixin: export const boxWidth = (selector) => ({ mounted() { selector.addEventListener( 'resize', this.setBoxWidth ); ...

javascriptvue.jsmixins

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Is there a way to create a smooth fade in effect for a <p> element on my website? Currently, I am using Ajax to retrieve the server time and display it. However, the elements appear abruptly and I would like to make the transition more gradual by ad ...

jqueryhtmlajaxasp.net-mvc-3fade

You will need to return a string instead of a Json Object in order for it to function correctly

I am facing an issue where I need to return a list of json objects to the view, but it seems to be causing problems because it's being returned as an object. It works fine if I return a string or a list of strings instead. However, what I really need ...

c#jqueryasp.net-mvcjson

Eliminate apostrophes in a string by using regular expressions

Can someone help me with this word What is The Answer? I need to eliminate the space and apostrophe '. To remove spaces, should I use this method: data.text.replace(/ +/g, ""). But how can I remove the apostrophe? ...

javascriptregextypescript

How to use jQuery to select an element based on a partial match of its ID using regular

I am trying to find input fields that follow this specific pattern: a_profile_contact_attributes_addresses_attributes_0_address b_store_contact_attributes_addresses_attributes_3_address somethingelse_contact_attributes_addresses_attributes_44_address To ...

jqueryregex

How to add suspense and implement lazy loading for a modal using Material-UI

Currently, I am implementing <Suspense /> and lazy() to enhance the performance of my project. While everything seems to be working smoothly, I have observed some minor changes in DOM handling that are causing me slight confusion. Consider this scen ...

javascriptreactjsmodal-dialogmaterial-uilazy-loading

Reducer is not a standalone function in the realm of React Native's Redux framework

I need to implement a reducer in my react native application. The store constant is defined as follows: export const USER_PROFILE = 'USER_PROFILE'; This is the content of action.js file: import {USER_PROFILE} from '../constants/index'; ...

javascriptreact-nativereduxreact-reduxredux-toolkit

Exploring AngularJS: Effortlessly Retrieving Object Values

HTML: <div ng-app = "" ng-controller = "personController"> <p>Persoon: <select ng-model="persoon"> <option ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option> & ...

javascriptangularjsjsonajax

The React app I've been working on has a tendency to unexpectedly crash when reloading the code from time

Dealing with a frustrating issue here. I've been working on an app and for the past few weeks, it keeps crashing unexpectedly. It seems to happen more frequently after saving my code to trigger a reload, but it can also just crash randomly while navig ...

javascriptreactjsrestdebuggingcreate-react-app

JavaScript code for downloading data through AJAX and then loading a chart is not functioning as expected

<script> var highchartsOptions = { chart: { backgroundColor: 'rgba(255, 255, 255, 0.1)', type: 'column' }, title: { text: '' }, exporting: ...

javascriptjqueryajax

Safeguard your Firebase database listeners against potential web DOS attacks and unauthorized access to sensitive credentials

Firebase is such a game-changer on mobile devices, but it's not always the best fit for web applications. This is common knowledge. I rely on firebase My users are aware of the database URL They can view certain aspects of the database that I'v ...

javascriptsecurityfirebasefirebase-realtime-databasereal-time

What causes immediately invoked functions within event handlers to be executed before the event is triggered?

let b = (function maria() { alert("ee"); })(); * this code runs as soon as the page loads * <button onclick="b">Click me</button> * this code only runs when button is clicked * <button onclick="alert('ee')">Click m ...

javascripthtml

Steps to import shared CSS using Styled-components

In my project using react, I've implemented styled-components for styling. One requirement is to have a shared loading background. Here is the code snippet of how I defined it: const loadingAnimation = keyframes` 0% { background-position: 95% 95%; } ...

javascriptcssreactjsstyled-components

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

When using the startOffset or text-anchor attributes, I noticed that some characters are missing. How can I fix this issue? Thank you. It appears that in this scenario, the characters `1234` are missing. <svg xmlns="http://www.w3.org/2000/svg" versi ...

javascriptcsssvg

Crafting the Perfect HTML Table Layout

I'm working on a rather intricate table that needs to be created. I've managed to create a simple one, but I could use some guidance on how to proceed. Desired Table Structure Current Table Structure <table class="ccTbl" border="0" cellpadd ...

htmlhtml-table

What is the method to prevent the label from closing in the MUI 5 datepicker?

Is there a method to prevent the Material 5 Datepicker from closing when there's a label but no value? Current Scenario: Current Desired Outcome: Expected Sample Code: <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker lab ...

javascriptreactjstypescriptmaterial-uidatepicker

Switch the visibility of an HTML input styled as a "spinner"

I have managed to create a CSS-based method for toggling the visibility of span or input elements depending on whether a radio button is checked. I got inspired by this insightful question on Stack Overflow. However, I encountered an issue where this togg ...

jquerycssjquery-uispinner

The definition of require is missing in the MEAN stack node

Currently experimenting with building an application on the MEAN stack and encountered a hurdle involving the use of Node's require function. Here is my current project structure: -- app -- images -- scripts -- app.js // configuration fi ...

javascriptangularjsnode.jsexpressmongoose

What is the best way to extract pricing information from Udemy?

Important: I haven't been able to find a relevant solution in similar questions. How can I extract prices from Udemy using web scraping? Scraping Data From Udemy's AngularJs Site Using PHP How do I obtain promotional prices using the Udemy API ...

pythonhtmlseleniumweb-scraping

prompting the JavaScript hangman game to identify the letters in the "selected word"

Currently, I am on a mission to teach myself Javascript and have taken on the challenge of creating a simple hangman game. This type of project is commonly used in interviews or tests, so it seemed like a great opportunity for practice. My approach involve ...

javascriptprompt