使用scroll-snap实现滚动吸附效果时返回顶部按钮失效如何解决

问题根源 #

你当前的滚动行为并没有发生在html/body元素上：你给body设置了overflow-y: hidden，全局页面本身没有滚动条，真正产生滚动、配置了scroll-snap的是包裹所有section的外层div容器，所以你之前修改html和body的scrollTop属性当然不会生效，和scroll-snap功能本身没有冲突。

修复方案 #

第一步：给滚动容器添加专属标识 #

为了避免误伤页面其他div元素，给外层滚动容器加专属类名，同时顺便修正你原HTML中Section 5的p标签闭合语法错误，修改后HTML代码如下：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- 给外层div加class标识 -->
<div class="scroll-container">
 <section>
  <p>Section 1</p>
 </section>

 <section class="scroll-one">
  <p>Section 2</p>
 </section>

 <section class="scroll-two">
  <p>Section 3</p>
 </section>

 <section class="scroll-three">
  <p>Section 4</p>
 </section>

 <section class="scroll-four">
  <p>Section 5</p>
 </section>

 <section class="scroll-five">
  <p>Section 6</p>
  <a id="return-to-top-button" href="#">Return to top</a>
 </section>
</div>

同时对应修改CSS里的选择器，把原有的全局div选择器替换为专属类名，避免影响页面其他普通div元素：

* {
 margin: 0px;
 padding: 0px;
}

body {
 overflow-y: hidden;
}

/* 替换原有CSS中的div选择器 */
.scroll-container {
 scroll-snap-type: y mandatory;
 overflow-y: scroll;
 height: 100vh;
}

section {
 height: 100vh;
 scroll-snap-align: center;
}

.scroll-one {
    background-color: red;
}

.scroll-two {
    background-color: blue;
}

.scroll-three {
    background-color: green;
}

.scroll-four {
    background-color: orange;
}

.scroll-five {
    background-color: yellow;
}

第二步：修改JS滚动逻辑 #

把滚动操作的目标改为实际产生滚动的.scroll-container容器：

$("#return-to-top-button").click(function (event) {
    event.preventDefault();
    $('.scroll-container').animate({ scrollTop: 0 }, 'fast');
    return false;
});

修改后点击返回顶部按钮即可正常滚动到首个section，scroll-snap会自动完成吸附对齐，符合你要的幻灯片展示效果。

内容的提问来源于stack exchange，提问作者Ethan Partridge