当前位置：首页 > JavaScript

js实现上下翻页

2026-03-01 05:43:17JavaScript

实现上下翻页的JavaScript方法

使用事件监听和DOM操作实现上下翻页功能。以下是两种常见实现方式：

监听键盘事件

通过keydown事件检测用户按下的方向键（上/下箭头），触发页面滚动或内容切换：

js实现上下翻页

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowUp') {
    window.scrollBy(0, -100); // 向上滚动100px
    // 或切换到上一页内容：prevPage();
  } 
  else if (event.key === 'ArrowDown') {
    window.scrollBy(0, 100); // 向下滚动100px
    // 或切换到下一页内容：nextPage();
  }
});

按钮点击翻页

为上下翻页按钮添加点击事件处理：

js实现上下翻页

<button id="prevBtn">上一页</button>
<button id="nextBtn">下一页</button>

<script>
  document.getElementById('prevBtn').addEventListener('click', function() {
    // 切换到上一页逻辑
    currentPage = Math.max(1, currentPage - 1);
    updateContent();
  });

  document.getElementById('nextBtn').addEventListener('click', function() {
    // 切换到下一页逻辑
    currentPage = Math.min(totalPages, currentPage + 1);
    updateContent();
  });

  function updateContent() {
    // 根据currentPage更新显示内容
    document.getElementById('content').innerHTML = `当前页码: ${currentPage}`;
  }
</script>

平滑滚动翻页实现

如需实现整页平滑滚动效果，可使用scrollIntoView或CSS平滑滚动：

// 整页滚动
function scrollToNext() {
  const pages = document.querySelectorAll('.page');
  let currentIndex = Array.from(pages).findIndex(page => 
    page.getBoundingClientRect().top >= 0
  );

  if (currentIndex < pages.length - 1) {
    pages[currentIndex + 1].scrollIntoView({ behavior: 'smooth' });
  }
}

// 在CSS中启用全局平滑滚动
html {
  scroll-behavior: smooth;
}

分页内容切换

对于内容分页的场景，保持当前页码状态并动态加载内容：

let currentPage = 1;
const totalPages = 10;

function loadPage(page) {
  fetch(`/api/data?page=${page}`)
    .then(response => response.json())
    .then(data => {
      document.getElementById('content').innerHTML = renderContent(data);
    });
}

// 初始化加载第一页
loadPage(currentPage);