js实现上下滚动

实现上下滚动的JavaScript方法

使用window.scrollTo()方法

通过window.scrollTo()方法可以实现页面的上下滚动。该方法接受两个参数，分别是水平滚动位置和垂直滚动位置。

// 滚动到页面顶部
window.scrollTo(0, 0);

// 滚动到页面底部
window.scrollTo(0, document.body.scrollHeight);

使用window.scrollBy()方法

window.scrollBy()方法可以实现相对当前位置的滚动。参数为水平和垂直滚动的像素值。

// 向下滚动100像素
window.scrollBy(0, 100);

// 向上滚动100像素
window.scrollBy(0, -100);

使用element.scrollIntoView()方法

通过scrollIntoView()方法可以让某个元素滚动到可视区域内。

// 滚动到指定元素
document.getElementById('target-element').scrollIntoView();

平滑滚动效果

可以通过设置behavior参数为smooth实现平滑滚动效果。

// 平滑滚动到页面顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

// 平滑滚动到元素
document.getElementById('target-element').scrollIntoView({
  behavior: 'smooth'
});

监听滚动事件

可以通过监听scroll事件实现自定义滚动逻辑。

window.addEventListener('scroll', function() {
  console.log('当前滚动位置:', window.scrollY);
});

自定义滚动按钮

结合HTML按钮实现点击滚动功能。

<button onclick="scrollToTop()">回到顶部</button>
<button onclick="scrollToBottom()">滚动到底部</button>

<script>
function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function scrollToBottom() {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}
</script>

限制滚动范围

可以通过判断当前滚动位置来限制滚动行为。

window.addEventListener('scroll', function() {
  if (window.scrollY > 500) {
    window.scrollTo(0, 500); // 限制最大滚动位置
  }
});