scrollTop正则匹配规则被覆盖问题：平滑滚动与回到顶部按钮冲突

我来帮你搞定这个问题！你的平滑滚动代码之所以会干扰回到顶部按钮，是因为它匹配了所有href以#开头的链接，包括那个href="#"的回到顶部按钮。当点击这个按钮时，代码会尝试寻找id为#的元素（这在页面里通常不存在），导致滚动逻辑出错，还会把URL hash设为#，引发意外行为。

下面给你两种实用的修复方案，你可以根据自己的习惯选择：

方案一：拆分逻辑，单独处理回到顶部按钮 #

这种方法把普通锚点和回到顶部按钮的逻辑分开，更清晰易维护：

$(document).ready(function(){
  // 处理普通锚点的平滑滚动，排除href="#"的链接
  $('a[href^="#"]').not('[href="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
      window.location.hash = target;
    });
  });

  // 单独实现回到顶部的平滑滚动
  $('.scrollup').on('click', function(e) {
    e.preventDefault();
    $('html, body').stop().animate({
      'scrollTop': 0
    }, 900, 'swing');
    // 这里可以选择不设置hash，避免URL末尾出现不必要的#
  });
});

方案二：在原有代码中添加判断逻辑 #

如果你不想拆分代码，可以在同一个事件处理函数里加入判断，区分普通锚点和回到顶部按钮：

$(document).ready(function(){
  $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash;
    let scrollTopVal;
    
    // 判断是否是回到顶部按钮
    if (target === '#') {
      scrollTopVal = 0; // 直接滚动到页面顶部
    } else {
      var $target = $(target);
      // 额外判断：确保目标元素存在，避免出错
      if (!$target.length) return;
      scrollTopVal = $target.offset().top;
    }
    
    $('html, body').stop().animate({
      'scrollTop': scrollTopVal
    }, 900, 'swing', function () {
      // 只有普通锚点才更新URL hash
      if (target !== '#') {
        window.location.hash = target;
      }
    });
  });
});

两种方案都能解决你的问题，测试的时候记得分别验证：点击普通锚点能平滑滚动到对应位置，URL hash正常更新；点击回到顶部按钮能顺畅滚到页面顶部，不会出现异常行为。

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