Using JavaScript to control the scrolling behavior on a Bootstrap modal

Looking for a solution regarding my Bootstrap modal situation. I have a modal with a scroll bar, and what I want is that each time a user clicks on a button in the modal body, a function should be executed to move to the next step of a wizard within the modal. However, the challenge lies in wanting the scrollbar of the modal to jump back to the top every time a button is clicked and the next step is displayed.

I am aware that using "window.scrollTo(0, 0)" can easily achieve this on a web page, but how can I make it work within a Bootstrap modal?

Your help is much appreciated. Thanks!

javascriptbootstrap-4scrollmodal-dialog

Answer №1

You have the option to utilize the jQuery scrollTop method

$(document).ready(function() {
  let $modal_body = $('.modal-body')
  let $scroll_btn = $('.scroll-to-top')
  $scroll_btn.click(function() {
    $modal_body.scrollTop(0)
  })
})
.modal-body {
  max-height: 60vh;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424504a524a54">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body overflow-auto">
        <!-- Your long content here -->
        <a class="scroll-to-top btn btn-primary" href="#">scroll to top</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeaab0a8b0ae">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

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

Exploring (nested) data structures in JavaScript

I'm struggling to understand if my issue lies in how I am organizing my array or in how I am accessing it. The idea is simple: I want to have an array of car makes and models that I can access for display purposes. const carBrands = [ { Audi: { ...

javascriptarraysloops

Inquiries prior to projecting rays

As I delve into the world of Interaction with Three.js, several questions arise in my mind. 1) Can you shed some light on what exactly Viewport Coordinates are? 2) In what ways do they differ from client Coordinates? 3) How did we come up with this form ...

javascriptthree.jsprojection

Tips for managing variables to display or hide in various components using Angular

In this example, there are 3 main components: The first component is A.component.ts: This is the parent component where an HTTP call is made to retrieve a response. const res = this.http.post("https://api.com/abcde", { test: true, }); res.subscribe((r ...

javascriptangulartypescript

Is it possible to create dynamic backgrounds using Twitter Bootstrap's responsiveness?

Is there a way to create a responsive image arrangement for backgrounds on a website? Imagine having different background images load based on various screen resolutions. Additionally, it would be advantageous to specify different behaviors such as having ...

javascriptcsshtmltwitter-bootstrap

Angular: Backend responds with a token which Angular then stores within double quotes

Following the BE response, this code snippet is what I have: $cookieStore.put('Auth-Token', user.authToken); However, when checking the cookies, I notice that it displays Auth-Token: %220996dcbe-63e6-4d99-bd17-d258e0cc177e%22 Upon logging it to t ...

javascriptangularjsstring

Customize Date Display in Material-UI DataGrid

How do I change the date format in MUI DataGrid from mongo's format to moment.js? In addition, I would like to add a new field with an edit icon that, when clicked, will redirect to the edit page. Here is what my code looks like: const columns = [ ...

javascriptreactjsmaterial-ui

Initiating the "cellValueChanged" event within the bespoke renderer component of Angular AG Grid when the selection is changed

How can I trigger the "cellValueChanged" event in an Angular AG Grid custom renderer component when a select element is changed? I have been working with Angular AG Grid and a custom renderer component. My goal is to fire the (cellValueChanged)="onCellValu ...

javascriptangularag-gridag-grid-angular

Error encountered: Unable to load Angular Materials due to [$injector:modulerr] issue

Can someone help me figure out what's wrong here? <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="width ...

javascriptjqueryhtmlangularjs

Revamping MapReduce in MongoDB Version 2.4

After upgrading to MongoDB 2.4, I encountered an issue with a map function that uses db, as mentioned in the release notes. The release notes suggest refactoring, but I am unsure about the best approach to take. The part of the function that is no longer ...

javascriptmongodb

Displaying 100,000 sprites with a faint 0.1 opacity, utilizing see-through backgrounds and crisp antialiasing

In my current setup, I have the following key pieces of code: Renderer renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: canvas }); Textures dot: THREE.ImageUtils.loadTexture('./assets/images/dot.png') Material ...

javascriptthree.js

Oops! It looks like there was an error. Remember that AJAX events should be connected to the

I am completely new to the world of Ajax and unfortunately, I encountered an error message in my browser: "JQMIGRATE: AJAX events should be attached to document: ajaxComplete" After some research, it seems like I need to incorporate certain Ajax functi ...

javascriptjqueryajax

CSS Bootstrap JS failed to load on localhost upon refreshing the page

Every time I access my localhost Laravel project for the first time, it loads fine. However, when I refresh the page, I start receiving 404 errors for CSS, JS, and other files, causing the layout of the webpage to change. Essentially, Bootstrap JS files ar ...

javascriptlaravelapacheserverbootstrap-5

developing customized designs in an Angular 2 application

I have been working on developing a basic application in angular 2. The layout of my home page consists of a top navigation bar and a side navigation bar. Here is the code snippet for my homepage template: home.component.html <div class="well sideba ...

htmlangularbootstrap-4

The combination of Material UI custom TextField and Yup does not seem to be functioning properly

I am facing an issue with integrating my custom TextField into my RegisterForm along with Yup validation. Whenever I use the custom TextField, I encounter a message "⚠ Champ obligatoire" after clicking on Submit, which is not the case when using a simple ...

javascriptreactjsmaterial-uitextfieldyup

Sidebar-driven top navigation menu

I am currently developing a Single Page Application using VueJS along with vuerouter. In my App.vue file, the structure is as follows: <template> <div id="app"> <header><topbar></topbar></header> <div cl ...

javascriptmenunavigationvue.jsvue-router

JQuery allows for multiple drag and drop functionalities, including events that occur after an object

I'm currently working on a .php page where I need to implement a drag-and-drop functionality. There will be 3 draggable elements that must be placed in their corresponding droppable elements - each draggable can only be dropped in a specific droppable ...

javascriptjquerydrag-and-dropdraggabledroppable

Tips for resolving a jspdf naming collision situation

In my react app, I am utilizing various jsPDF libraries as shown below: For exporting tables as HTML: import jsPDF from 'jspdf'; import "jspdf-autotable"; For converting SVG to PDF: const svg2pdf = require('svg2pdf.js'); con ...

javascriptreactjspdfjspdfjspdf-autotable

What is the best way to pass JSON data into a JavaScript function?

As a beginner in javascript, I have been struggling to find a solution for my problem for a week. The code example I am working with is shown below (all within an HTML page in the head tag) //example function 1 function randomString(len, charSet) { ...

javascriptjson

What is the best method for retrieving information from MongoDB and presenting it in a table with Node.js?

I'm struggling to understand how to retrieve data from mongodb and display it in an html/ejs file. I have a button in the html/ejs file that, when clicked, should show all the data from a mongodb database collection. While I've come across simil ...

javascriptnode.jsmongodbejs

Can you explain the inner workings of the sort function mechanism?

After reading through this article about Array.prototype.sort(), I noticed that the Sort() function can behave differently depending on the availability of compareFunction. When it comes to sorting strings, it uses UNICODE values. However, in a specific ...

javascriptarrayssorting