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

Posted 2023-05-08

【中文标题】每次打开时如何使 div 模态滚动到顶部？

【英文标题】：How to make div modal scrolled to the top each time I open it?

【发布时间】：2021-08-21 05:03:03

【问题描述】：

我用纯 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 的新手。任何想法将不胜感激！提前致谢。

【问题讨论】：

将样式改为display="block"后尝试添加modal.scrollTop = 0;

@Chin.Udara 感谢您的建议！我发现modal-content.scrollTop = 0; 对我有用！

【参考方案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>

【讨论】：

感谢您的建议！但是，这会将我的模态框的位置移动到窗口的顶部，这并不是我的意思。对于我可能造成的误导，我深表歉意。我找到了解决方案！

【参考方案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>

【讨论】：

谢谢！我认为这就是重点！我一直在尝试modal.scrollTop = 0，但应该改为modal-content.scrollTop = 0。