【问题标题】:How to stop page from scrolling up whenever a button is clicked?每当单击按钮时如何阻止页面向上滚动?
【发布时间】:2021-07-19 09:55:57
【问题描述】:

我需要帮助解决这个我无法解决的问题,或者在网上找到任何相关信息,所以请帮助

我正在制作一个网站,我有一个个人资料页面,用户可以在其中查看他们的个人数据,它分为 3 个部分。在每个部分中,我都放置了一个“编辑”按钮,供用户根据需要编辑他们的数据(是的,为整个页面中的数据制作一个“编辑”按钮会很棒,但我对此有困难,所以我现在就这样做)。

问题是:当您在此页面中向下滚动并单击“编辑”时,页面会重新加载,并且一直向上滚动。所以你必须再次向下滚动来编辑你的数据,然后当你完成并点击“更新”时,页面也会发生同样的事情,所以你必须再次向下滚动。

这真的很令人沮丧,所以如果您有任何提示或资源可以帮助我,请告诉我!

【问题讨论】:

标签: html button scroll refresh page-refresh


【解决方案1】:

如果我理解,你需要这个:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="form1" action="index.html#form1">
      <h1>Form 1</h1>
      <textarea rows="20"></textarea>
      <input type="submit" value="update" />
    </form>
    <form id="form2" action="index.html#form2">
      <h1>Form 2</h1>
      <textarea rows="20"></textarea>
      <input type="submit" value="update" />
    </form>
    <form id="form3" action="index.html#form3">
      <h1>Form 3</h1>
      <textarea rows="20"></textarea>
      <input type="submit" value="update" />
    </form>
  </body>
</html>

index.html 更改为您处理帖子提交的路径。

【讨论】:

  • 我认为您应该解释一下 Fragment 部分以及浏览器如何使用它。 en.wikipedia.org/wiki/URI_fragment
  • 成功了!太感谢了 !!我希望你今天过得愉快:)
  • @SaraA,谢谢!始终需要滚动到标签在页面中的特定位置,您可以为该标签设置一个 ID id="form1",然后将带有哈希 index.html#form1 的 ID 添加到地址路径
猜你喜欢
  • 1970-01-01
  • 2021-04-09
  • 1970-01-01
  • 1970-01-01
  • 2012-12-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多