极简单页博客侧边上下导航按钮href属性设置求助

针对你需要在固定侧边栏实现上下篇文章内页滚动的需求，这里提供两种实用方案：

方法1：精准定位文章滚动（推荐） #

这种方法需要给每篇文章添加统一的类标记，然后通过JavaScript的scrollIntoView方法实现平滑滚动到目标文章。

HTML结构示例 #

<!-- 文章容器 -->
<div class="post">第一篇博客内容</div>
<div class="post">第二篇博客内容</div>
<div class="post">第三篇博客内容</div>

<!-- 固定侧边栏按钮 -->
<div class="sidebar">
  <button id="prevBtn">上一篇</button>
  <button id="nextBtn">下一篇</button>
</div>

JavaScript逻辑 #

// 获取所有文章元素
const allPosts = document.querySelectorAll('.post');
// 记录当前浏览的文章索引
let currentPostIndex = 0;

// 上一篇按钮点击事件
document.getElementById('prevBtn').addEventListener('click', () => {
  if (currentPostIndex > 0) {
    currentPostIndex--;
    // 滚动到目标文章顶部，开启平滑动画
    allPosts[currentPostIndex].scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
});

// 下一篇按钮点击事件
document.getElementById('nextBtn').addEventListener('click', () => {
  if (currentPostIndex < allPosts.length - 1) {
    currentPostIndex++;
    allPosts[currentPostIndex].scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
});

说明：behavior: 'smooth'实现平滑滚动效果，若不需要可以去掉；block: 'start'确保文章顶部与视口顶部对齐，保证浏览体验一致。

方法2：基于视口的相对滚动 #

如果你的单页博客每篇文章高度接近视口高度，可以直接基于当前滚动位置做相对滚动，无需给文章加标记。

HTML结构示例 #

<div class="sidebar">
  <!-- 用a标签并阻止默认跳转行为 -->
  <a href="#" id="prevScroll">上一篇</a>
  <a href="#" id="nextScroll">下一篇</a>
</div>

JavaScript逻辑 #

// 上一篇滚动
document.getElementById('prevScroll').addEventListener('click', (e) => {
  // 阻止a标签默认跳转
  e.preventDefault();
  // 向上滚动一个视口高度
  window.scrollBy({
    top: -window.innerHeight,
    behavior: 'smooth'
  });
});

// 下一篇滚动
document.getElementById('nextScroll').addEventListener('click', (e) => {
  e.preventDefault();
  // 向下滚动一个视口高度
  window.scrollBy({
    top: window.innerHeight,
    behavior: 'smooth'
  });
});

说明：这种方法适合文章高度统一的场景，若文章高度差异较大，可能会出现滚动位置不准确的问题。

体验优化建议 #

• 可以给当前正在浏览的文章添加一个active类，方便用户识别当前位置；
• 当处于第一篇文章时禁用上一篇按钮，处于最后一篇时禁用下一篇按钮，避免无效点击：

function updateButtonStatus() {
  document.getElementById('prevBtn').disabled = currentPostIndex === 0;
  document.getElementById('nextBtn').disabled = currentPostIndex === allPosts.length - 1;
}

// 初始化时调用
updateButtonStatus();

内容的提问来源于stack exchange，提问作者Coraline Gr