Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names.

I want these scrolls to always be positioned at the top. I've been able to achieve this for the visible scroll using the provided snippets:

$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);

And also with this snippet:

var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

However, the scroll inside the accordion menu remains unaffected by these changes. When I manually open the accordion and run the snippets, it does scroll to the top.

To tackle this issue, either I need a way to apply these snippets to all scrolls on the page or have the javascript code executed when clicking on the accordion.

My preference is to implement the first solution. Despite attempting to modify the function as shown below, replacing scrollTop with alert(), I could not accomplish the desired outcome.

$(".m-accordion__item").click(function() {
    $('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

How can I successfully achieve this goal?

Answer №1

My issue has been resolved thanks to this solution. I also want to mention that this code is designed for use with bootstrap4, making it compatible with any bootstrap 4 templates.

$('.collapse').on('shown.bs.collapse', function(e) {

$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

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

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

this is the function in my controller public function getModel($make_id = null) { $make_id = request()->make_id; $carsmodel = CarModel::where('make_id', $make_id)->orderBy('model', 'ASC')->get(); return re ...

Directing to index.html using ExpressJS

JS, I am working on an express app that has various routes defined. However, I am facing an issue where if the router does not match any route, it displays index.html instead of redirecting to a specific route like '/*' as I expected. I am unsu ...

Retrieve the placeholder from the available resources using HTML elements

I have a simple string in my resource file "Good Day,Sir <br /> Have a nice day.". This string needs to be a placeholder on a TextArea. However, the HTML tags are not rendering properly. I've tried using Html.Raw but it doesn't seem to work ...

Interactive Bootstrap 4 button embedded within a sleek card component, complete with a dynamic click event

I am trying to create a basic card using bootstrap 4 with the following HTML code. My goal is to change the style of the card when it is clicked, but not when the buttons inside the card are clicked. Currently, clicking on the test1 button triggers both ...

A guide on utilizing URL parameters in Express.js to deliver images as static files

Looking to dynamically serve images from an "images" directory in my project based on user input, how can I achieve this? For instance, https://localhost:3000/images?fileName=burger This URL should display the corresponding image in the browser. If any ...

The new Facebook login button in my app seems to be glitchy as it fails to redirect users to the appropriate page after

I am working on a web application and have successfully integrated Facebook login from developers.facebook.com. However, I am facing an issue where after the user logs in with their Facebook credentials, they are not redirected to my application. Additiona ...

The value of the checked input with the name `nameofinput` is currently not defined

I'm having trouble passing the input value to another page. $( this ).attr( "href", '?module=module_progress_report&Subject='+ $('input[name=subject]:checked').val()+ '&Centre_Selected_ID='+ encodeURIComponen ...

Storing css data for iPhone Facebook application

Currently, I am in the process of developing a webpage specifically for the iPhone Facebook app wall link. Interestingly, when attempting to apply the margin attribute to a div within the webpage, the margin doesn't seem to have any effect when clicki ...

What is the best way to hide the div when scrolling to the top?

Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...

Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look. The code I have been using in FTL is as follows, but it consistently ends up next to the middle section: <table class="h ...

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...

What is the best way to retrieve information from a JavaScript file?

Learning.vue <template> <div> <button @click="test()">test</button> </div> </template> <script> import records from './records.js' export default { data () { return { ...

Employing v-btn for navigating to a different route depending on whether a specific condition is satisfied

Is there a way to prevent this button from redirecting to the specified URL? I want to implement a validation check in my method, and if it fails, I need to stop this button from performing any action. Any suggestions or assistance would be highly apprec ...

Ways to extract a specific value from a geojson object using the key name

After making a call to the back-end, I retrieved the below geojson data in the 'data' object. However, when trying to access the values of the 'type' and 'features' keys within the geojson, I encountered difficulties. data["g ...

Update the state of the parent component based on changes made in the child component (both are functional

Here is the layout for the current issue: . ├── components │ ├── ModalPolicy.js │ ├── Footer │ ├── index.js ├── pages │ ├── index.js I attempted to display the Modal on Footer/index.js but it did no ...

Divide the pair of arrays that are transmitted via JSON

I combined two arrays and passed them through JSON, as shown below: $result = array_merge($json, $json1); echo json_encode($result); Now, to retrieve the data, I am using the following code: $.getJSON('./tarefasaad52', function (data) { } How ...

Tips for choosing a specific set of list items using HTML

In my application, I have a list that is divided into sections like "currently viewing as," "recently viewed," and "staff." All elements in the list share the same classes, making it difficult to identify a specific list element in a particular section, su ...

Exploring Selenium: Clicking on Auto-Complete Suggestions using Python

Attempting to interact with an auto-complete search bar on the site in order to search for results. Wanting to click on the drop-down element that appears after entering a city name to perform a full city name search and obtain results. Below is the cod ...

When utilizing Javascript's Array.push method, a nested array is generated that is inaccessible using the index

I have reviewed several articles discussing the issue of asynchronous calls returning undefined. Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference Get data from fs.readFile However, none of these articles ...

Is there a way to activate an event when using # or @ in a text field on React/Next.js?

I'm in the process of starting a new project and I am thinking about how to incorporate this into react/nextjs. I want to create a user selection or hashtag selection dialog around the textarea, but I haven't been able to find any helpful article ...