js页面上下滚动效果

基础概念

JavaScript页面上下滚动效果通常指的是通过JavaScript控制网页内容的垂直滚动行为。这种效果可以通过多种方式实现，包括但不限于改变元素的scrollTop属性、使用动画库或者监听键盘事件来模拟滚动。

类型

平滑滚动：页面滚动时不是瞬间跳转，而是逐渐过渡。
快速滚动：页面滚动速度较快，常用于快速导航。
自定义滚动：根据特定需求定制滚动行为，如跟随鼠标滚动等。

应用场景

单页应用（SPA）：在单页应用中，滚动效果常用于页面间的过渡。
长页面导航：对于内容较多的长页面，滚动效果可以帮助用户更好地浏览。
动画和交互设计：结合CSS动画，可以实现更丰富的视觉效果。

示例代码

以下是一个简单的JavaScript实现平滑滚动的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll Example</title>
<style>
html {
  scroll-behavior: smooth;
}
</style>
</head>
<body>

<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

<div id="section1" style="height: 100vh; background-color: lightblue;">
  <h1>Section 1</h1>
</div>
<div id="section2" style="height: 100vh; background-color: lightgreen;">
  <h1>Section 2</h1>
</div>

<script>
// 如果浏览器不支持 scroll-behavior 属性，可以使用以下JavaScript代码实现平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});
</script>

</body>
</html>