如何利用js脚本实现页面滚动_js滚动效果脚本制作与代码解析

<p>behavior 设置为 'smooth' 即启用平滑滚动效果，浏览器原生支持，无需额外库。</p>

<H3>2. 点击按钮跳转到指定锚点</H3>
<p>常用于导航菜单点击后跳转到页面不同区域。可以通过元素的 ID 获取其位置并滚动过去。</p>
<font color="#0000FF">示例代码：</font>
```javascript
document.getElementById('scroll-btn').addEventListener('click', function(e) {
  e.preventDefault();
  const targetElement = document.getElementById('section2');
  const offsetTop = targetElement.offsetTop;

  window.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  });
});

<p>pageYOffset 返回当前垂直滚动的像素值，可用于判断滚动状态。</p>

<H3>4. 实现滚动进度条</H3>
<p>在页面顶部或底部添加一个进度条，显示当前浏览进度。</p>
<font color="#0000FF">示例代码：</font>
```javascript
const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset;
  const docHeight = document.body.offsetHeight;
  const winHeight = window.innerHeight;
  const scrolled = (scrollTop / (docHeight - winHeight)) * 100;

  progressBar.style.width = scrolled + '%';
});