Is there a way to ensure that a div modal always resets to the top when it's opened?

Question

Is there a way to ensure that a div modal always resets to the top when it's opened?

I created a modal using only HTML, CSS, and JavaScript. When I click a button on the main page, the modal pops up.

However, if I scroll down in the modal and then close it, when I reopen it, it still shows the scrolled-down view. How can I make it always display the content at the top whenever I open the modal?

Here is the code I used:

<div class="button" id="btn"></div>

<div class="modal" id="mymdl">
    <div class="modal-content" id="mdl-con">
        <div class="modalwidth">
            <img class="image-title" id="img-ttl" src="./img/banner.png">
            <span class="close" aria-hidden="true">&times;</span>
        </div>
        <div class="paragraph">
            Here is the main content.
        </div>
    </div>
</div>

document.getElementById('btn').addEventListener('click', function(e) {
    modal.style.display = "block";
});

var closeX = document.getElementsByClassName("close")[0];
closeX.onclick = function() {
    modal.style.display = "none";
}

I attempted to use the window.scroll method suggested in a solution for this issue, but it did not resolve my problem.

As a beginner in HTML, CSS, and JavaScript, any advice on how to fix this would be greatly appreciated! Thank you in advance.

javascript html css simplemodal

Answer 1

Answer №1

Instead of scrolling to the top, a more efficient method is to bring the modal to the top.

document.getElementById('btn').addEventListener('click', function(e) {
  modal.style.display = "block";
  modal.style.top = window.pageYOffset + 10 + "px";
});

const modal = document.querySelector('.modal')
const btns = document.querySelectorAll('.btn');

for (let x = 0; x < btns.length; x++) {
  btns[x].addEventListener('click', function(e) {
    modal.style.display = "block";
    modal.style.top = window.pageYOffset + 10 + "px";
    console.log(window.pageYOffset, modal.style.top);
  });
}

.container {
  height: 1000px;
}

.btn {
  display: inline-block;
  margin-top: 400px;
}

.modal {
  padding: 20px;
  position: absolute;
  width: 200px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
}

<div class='container'>
  <div class='modal'>Modal</div>

  <button class='btn'>click</button>
  <hr>
  <button class='btn'>click</button>
</div>

Answer 2

Instead of scrolling to the top, a more efficient method is to bring the modal to the top.

document.getElementById('btn').addEventListener('click', function(e) {
  modal.style.display = "block";
  modal.style.top = window.pageYOffset + 10 + "px";
});

const modal = document.querySelector('.modal')
const btns = document.querySelectorAll('.btn');

for (let x = 0; x < btns.length; x++) {
  btns[x].addEventListener('click', function(e) {
    modal.style.display = "block";
    modal.style.top = window.pageYOffset + 10 + "px";
    console.log(window.pageYOffset, modal.style.top);
  });
}

.container {
  height: 1000px;
}

.btn {
  display: inline-block;
  margin-top: 400px;
}

.modal {
  padding: 20px;
  position: absolute;
  width: 200px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
}

<div class='container'>
  <div class='modal'>Modal</div>

  <button class='btn'>click</button>
  <hr>
  <button class='btn'>click</button>
</div>

Answer 3

Answer №2

To scroll an element to the top, you can utilize the code element.scrollTop = 0.

For instance, if you want to scroll a `.paragraph` element, you could implement something like this:

const modal = document.getElementById("mymdl");

document.getElementById('btn').addEventListener('click', function(e) {
    modal.style.display = "block";
});

var closeX = document.getElementsByClassName("close")[0];
closeX.onclick = function() {
    modal.querySelector(".paragraph").scrollTop = 0; //scroll to the top
    modal.style.display = "none";
}

.modal
{
  position: fixed;
}

.modal-content
{
  border: 1px solid black;
}

.paragraph
{
  overflow: auto;
  height: 50vh;
  white-space: pre;
  text-align: center
}

.paragraph > div
{
  height: 120%;
}

.paragraph > span
{
  position: relative;
  bottom: 0;
}

.button,
.close
{
  cursor: pointer;
}

<div class="button" id="btn">open modal</div>

<div class="modal" id="mymdl">
    <div class="modal-content" id="mdl-con">
        <div class="modalwidth">
            <img class="image-title" id="img-ttl" src="./img/banner.png">
            <span class="close" aria-hidden="true">&times;</span>
        </div>
        <div class="paragraph">
        <div>Here is the main content.
scroll down</div><span>bottom</span>
        </div>
    </div>
</div>

Answer 4

To scroll an element to the top, you can utilize the code element.scrollTop = 0.

For instance, if you want to scroll a `.paragraph` element, you could implement something like this:

const modal = document.getElementById("mymdl");

document.getElementById('btn').addEventListener('click', function(e) {
    modal.style.display = "block";
});

var closeX = document.getElementsByClassName("close")[0];
closeX.onclick = function() {
    modal.querySelector(".paragraph").scrollTop = 0; //scroll to the top
    modal.style.display = "none";
}

.modal
{
  position: fixed;
}

.modal-content
{
  border: 1px solid black;
}

.paragraph
{
  overflow: auto;
  height: 50vh;
  white-space: pre;
  text-align: center
}

.paragraph > div
{
  height: 120%;
}

.paragraph > span
{
  position: relative;
  bottom: 0;
}

.button,
.close
{
  cursor: pointer;
}

<div class="button" id="btn">open modal</div>

<div class="modal" id="mymdl">
    <div class="modal-content" id="mdl-con">
        <div class="modalwidth">
            <img class="image-title" id="img-ttl" src="./img/banner.png">
            <span class="close" aria-hidden="true">&times;</span>
        </div>
        <div class="paragraph">
        <div>Here is the main content.
scroll down</div><span>bottom</span>
        </div>
    </div>
</div>

Is there a way to ensure that a div modal always resets to the top when it's opened?

Answer №1

Answer №2

Similar questions

What is the best way to retrieve the name of all input tags, obtain their respective IDs, and append additional text to each

Setting up a simple configuration for WebGl and Javascript

Deleting a CSS class from buttons inside of two button arrays by utilizing two separate functions

Incorporate issues into the VeeValidate error collection using the parent component, then monitor them from the child components

Guide to making the top margin of Chinese characters consistent on all web browsers

CSS does not alter the properties of a link's "background-color" or "border-color"

Hidden Span Element Appears Invisible

JavaScript interprets code differently each time it runs

Soft keyboard on mobile fails to update when arrows are used in Ajax-populated dropdown menus

What are the different HTTP Methods supported by AJAX?

Troubles with jQuery mobile functionality when utilizing hyperlink urls within a table

In CSS3, what is the significance of placing a comma between transition and transform?

Sending an array of strings from an ajax call to an MVC controller

What is the method for obtaining the worldwide location of a vertex on a skinned mesh in Three.js?

Tips for retrieving text from child tags that may only be displayed under certain conditions

Unexpected behavior: JQuery Ajax request not displaying Json object following recent update to JQuery version 1.10.2

Tips for designing a unique CSS ellipse effect for text styling

Retrieve ALL information from a third-party API request with a limit of 1000 calls

What is the method for initiating a loop from index 1 rather than index 0 in an *ngFor loop within Angular?

The utilization of $(this) proves to be ineffective