如何阻止“查看更多/收起”按钮点击后跳转至页面底部？

问题根源在于你使用了带href="#"的链接作为触发按钮，点击时浏览器会执行默认的锚点跳转行为，导致页面滚动到顶部/底部。以下是两种可行的修复方案：

方法1：阻止点击事件的默认行为 #

在JavaScript的点击处理函数中添加event.preventDefault()，直接禁用浏览器的默认跳转动作：

$('.toggle-btn').on('click', function(e) {
  // 阻止默认链接跳转行为
  e.preventDefault();
  
  // 原有内容切换逻辑
  $('.more-content').toggle();
  const currentText = $(this).text();
  $(this).text(currentText === '查看更多' ? '收起' : '查看更多');
});

方法2：替换为语义化按钮标签 #

把<a>标签换成<button>标签，彻底避免链接的默认跳转行为，同时可根据需求调整按钮样式以匹配原有视觉效果：

修改后的HTML结构 #

<div class="content-container">
  <p>这是默认显示的内容...</p>
  <div class="more-content" style="display:none;">
    <p>这是点击查看更多后显示的额外内容...</p>
  </div>
  <button class="toggle-btn">查看更多</button>
</div>

可选：匹配原链接样式的CSS调整 #

.toggle-btn {
  background: none;
  border: none;
  color: #0073aa;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.toggle-btn:hover {
  color: #006799;
}

两种方案都能解决点击“收起”时页面跳转的问题，推荐方法2，因为按钮标签的语义化更符合交互触发的场景，而非导航链接的用途。

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