每次打开时如何使 div 模态滚动到顶部？

Question

我用纯 html、CSS、javascript 构建了一个模态。 当我单击主页上的按钮时，它会弹出。

但是，如果我向下滚动模型并关闭它，它会在我重新打开它时显示向下滚动的视图。如何让它每次打开模型时始终在顶部显示内容？

这是我的代码：

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

我尝试了this problem的解决方案中提供的window.scroll方法，但是并没有解决我的问题。

我是 html、css 和 javascript 的新手。任何想法将不胜感激！提前致谢。

Answer 1

这是一种方法，而不是滚动到顶部，而是将模态顶部带给您。

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

您可以使用element.scrollTop = 0 将其滚动到顶部。

例如，如果 .paragraph 是滚动的内容，您可以使用以下内容：

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>