<a>元素样式按钮触发页面滚动，如何仅保留动画阻止滚动？

我完全懂你遇到的糟心事——想让按钮只触发动画，不滚动到链接指向的元素，但用preventDefault()后动画居然失效了。这大概率是事件处理顺序不对，或者动画逻辑和的默认跳转行为绑定在了一起，咱们可以通过这几种方式解决：

1. 先阻止跳转，再手动触发动画 #

在点击事件里先调用preventDefault()切断默认跳转，再主动触发动画（比如添加预定义的CSS动画类），把两个行为彻底解耦：

$(document).ready(function() {
  $('.button').on('click', function(e) {
    // 第一步：阻止默认的滚动/跳转行为
    e.preventDefault();
    // 第二步：触发动画——给按钮添加动画类
    $(this).addClass('btn-animate');
    // 动画结束后移除类，方便下次点击再次触发
    setTimeout(() => {
      $(this).removeClass('btn-animate');
    }, 400); // 这里的时长要和你CSS动画的时长保持一致
  });
});

对应的CSS动画示例（你可以替换成自己的动画逻辑）：

.button {
  padding: 0.8rem 1.5rem;
  background: #2563eb;
  color: white;
  border-radius: 4px;
  transition: transform 0.4s ease, background-color 0.4s ease;
}

.btn-animate {
  transform: scale(0.92);
  background-color: #1d4ed8;
}

2. 检查动画是否依赖伪类状态 #

如果你的动画是基于<a>的:active或:focus伪类实现的，那preventDefault()其实不会影响这些状态的触发——除非你在事件处理中意外干扰了状态变更。这种情况下只需要阻止跳转，动画会自动触发：

.button:active {
  transform: scale(0.92);
  background-color: #1d4ed8;
}

$('.button').click(function(e) {
  e.preventDefault();
  // 不需要额外操作，:active伪类会自动触发动画
});

3. 应急语义化方案（不推荐长期用） #

如果上面的方法都卡壳了，可以临时把<a>的href设为javascript:void(0)，这样不会触发跳转，但要注意这种写法在语义化和无障碍性上有缺陷，只适合应急：

<a href="javascript:void(0)" class="button">点击触发动画</a>

关键提醒 #

• 一定要在事件开头就调用preventDefault()，别放在动画回调里，不然默认跳转行为已经执行完了。
• 确保DOM加载完成后再绑定事件（用$(document).ready()或者把脚本放在页面底部）。
• 如果用了CSS关键帧动画，要确认动画类正确添加到了按钮元素上。

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