js实现上下翻页
实现上下翻页的JavaScript方法
使用事件监听和DOM操作实现上下翻页功能。以下是两种常见实现方式：
监听键盘事件
通过keydown事件检测用户按下的方向键（上/下箭头），触发页面滚动或内容切换：
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();
}
});按钮点击翻页
为上下翻页按钮添加点击事件处理：
<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);注意事项
- 移动端需考虑触摸事件支持
- 分页逻辑需处理边界情况（第一页/最后一页）
- 大量内容分页建议使用懒加载技术
- 可结合History API实现URL同步更新
