当前位置：首页 > JavaScript

js实现上下翻页

2026-01-30 14:40:10JavaScript

实现上下翻页的JavaScript方法

监听键盘事件实现翻页

通过监听键盘的上下箭头键触发翻页动作，适用于单页应用或长页面浏览场景。

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowUp') {
    window.scrollBy(0, -100); // 向上滚动100像素
  } else if (event.key === 'ArrowDown') {
    window.scrollBy(0, 100); // 向下滚动100像素
  }
});

平滑滚动到指定位置

使用scrollTo方法实现更流畅的翻页效果，可自定义滚动距离和动画时间。

js实现上下翻页

function smoothScroll(direction) {
  const currentPosition = window.pageYOffset;
  const scrollAmount = window.innerHeight * 0.9;

  window.scrollTo({
    top: direction === 'up' 
      ? currentPosition - scrollAmount 
      : currentPosition + scrollAmount,
    behavior: 'smooth'
  });
}

// 绑定按钮事件示例
document.getElementById('upBtn').addEventListener('click', () => smoothScroll('up'));
document.getElementById('downBtn').addEventListener('click', () => smoothScroll('down'));

分页内容切换实现

适用于多页内容切换的场景，通过DOM操作显示/隐藏不同页面内容。

js实现上下翻页

let currentPage = 1;
const totalPages = 5; // 总页数
const pages = document.querySelectorAll('.page');

function goToPage(pageNum) {
  pages.forEach(page => page.style.display = 'none');
  document.querySelector(`.page-${pageNum}`).style.display = 'block';
  currentPage = pageNum;
}

function navigate(direction) {
  const newPage = direction === 'up' ? currentPage - 1 : currentPage + 1;
  if (newPage > 0 && newPage <= totalPages) {
    goToPage(newPage);
  }
}

// 初始化显示第一页
goToPage(1);

触摸滑动支持

为移动设备添加触摸事件支持，通过计算滑动距离判断翻页方向。

let startY = 0;

document.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
}, false);

document.addEventListener('touchend', (e) => {
  const endY = e.changedTouches[0].clientY;
  const threshold = 50; // 滑动阈值

  if (startY - endY > threshold) {
    smoothScroll('down');
  } else if (endY - startY > threshold) {
    smoothScroll('up');
  }
}, false);

注意事项