当 "restoring window" 到原始大小时跳转到 html 锚点，没有 JS？

Question

我正在编写以下简化结构的单页练习网站：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="path">
  </head>
  <body>
    <section id="paving">
        <a href="#list">Change layout to list</a>
    </section>
    <section id="list">
        <a href="#paving">Change layout to paving</a>
    </section>
  </body>
</html>

里面有两个 <section>，每个都有样式

section {
    height: 90vh;
    margin-bottom: 10vh;
}

相关正文设置包括

body {
   overflow: hidden;
   height: 200vh;
}

因此在任何给定时刻，只有两个部分中的一个完全显示，其他完全隐藏。在这两个块之间移动的唯一方法是使用两个链接锚点：看看屏幕 1，角落里的红色按钮带你到第二部分，按钮相同（这两个按钮只是彼此的锚点）：

但是当我尝试将 window 的大小调整为更小的尺寸时，问题就开始了，然后单击我现在可以看到的任何按钮，然后在我的浏览器中单击“恢复 window”按钮. 如您所见，浏览器将它恢复到任意高度位置，而我想实现浏览器将其恢复到任何锚点的行为（这样任何部分都会“粘”到顶部再次，如屏幕截图编号 1).

这可能吗？我怎样才能实现它？

我认为没有必要指定浏览器，这已经被多次复制，所以我想这只是代码本身的一个特点。

Answer 1

您可以尝试 scroll-snap-type 和 scroll-snap-align 强制滚动对齐每个 section:

section {
  scroll-snap-align: center;
  height: 90vh;
  margin-bottom: 10vh;
}

html {
  scroll-snap-type: y mandatory;
}

body {
  height: 200vh;
}

<section id="paving">
  <a href="#list">Change layout to list</a>
</section>
<section id="list">
  <a href="#paving">Change layout to paving</a>
</section>

Here's 一篇关于它的 in-depth 文章。

浏览器支持似乎不错，除了不支持 IE。

当 "restoring window" 到原始大小时跳转到 html 锚点，没有 JS？

Jump to html anchor when "restoring window" to original size, no JS?

html

css

anchor