如何为含onclick锚点跳转的按钮实现页面平滑滚动？

嘿，我来帮你搞定这个问题！你的按钮没法触发平滑滚动，核心原因是按钮上的onclick="location.href='#anchor'"会直接触发浏览器的默认跳转行为，而且这段代码的执行优先级比你绑定的jQuery点击事件更高——相当于浏览器直接“跳过”了你的平滑滚动逻辑，直接跳去锚点了。下面给你两种实用的解决办法：

方法一：修改按钮的点击逻辑，调用自定义平滑滚动函数 #

这种方法最直接，把按钮的onclick改成调用我们写的平滑滚动函数，而不是直接修改location.href：

按钮HTML修改 #

<button onclick="smoothScroll('#anchor')" class="button">Name</button>

对应的jQuery代码 #

$(document).ready(function() {
  // 保留原有的a标签平滑滚动逻辑
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
      });
    }
  });

  // 自定义全局平滑滚动函数，供按钮调用
  window.smoothScroll = function(targetHash) {
    if (targetHash && $(targetHash).length) { // 先检查锚点元素是否存在
      $('html, body').animate({
        scrollTop: $(targetHash).offset().top
      }, 800, function() {
        window.location.hash = targetHash;
      });
    }
  }
});

这样按钮点击时会直接执行我们的平滑滚动逻辑，不会触发浏览器的默认跳转。

方法二：不修改按钮HTML，拦截并覆盖原有点击行为 #

如果不想改动按钮的HTML代码，可以用jQuery拦截按钮的点击事件，先阻止原有onclick的行为，再执行平滑滚动：

jQuery代码 #

$(document).ready(function() {
  // 保留原有的a标签平滑滚动逻辑
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
      });
    }
  });

  // 处理带onclick锚点跳转的按钮
  $(".button").on('click', function(event) {
    // 从onclick属性中提取目标锚点
    var onclickAttr = $(this).attr('onclick');
    var targetMatch = onclickAttr.match(/('#[^']+'|#\w+)/); // 匹配单引号包裹或直接的锚点
    if (!targetMatch) return; // 如果没找到锚点就退出

    var targetHash = targetMatch[0].replace(/'/g, ""); // 去掉可能的单引号
    if (!$(targetHash).length) return; // 检查锚点元素是否存在

    // 阻止原有的onclick行为和默认跳转
    event.preventDefault();
    // 执行平滑滚动
    $('html, body').animate({
      scrollTop: $(targetHash).offset().top
    }, 800, function() {
      window.location.hash = targetHash;
    });

    // 移除原onclick属性，避免下次点击重复触发原逻辑
    $(this).removeAttr('onclick');
  });
});

这个方法会自动提取按钮onclick里的锚点地址，替换成平滑滚动逻辑，不需要修改HTML代码，适合不想动现有页面结构的场景。

小提示：两种方法里都加了锚点元素存在性检查，避免因为锚点不存在导致代码报错哦～

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