轻轻滚动到页面某一部分的脚本会在javascript上生成错误

新手：

我创建此脚本是为了在页面的任何部分轻轻滚动：

    $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
    });

每一个都很好，但有些事情真的困扰着我。在我的控制台上，我收到一个错误通知：

Uncaught Error: Syntax error, unrecognized expression: #

每次单击href=#的内部链接时。脚本仍然可以工作，并且不会与我的代码交互，所以我对此很满意，但并不完全满意

我在考虑一个if语句来排除错误，本质上只有当某些东西存在时才会激发我的效果，但这是我们正在讨论的文档，所以我认为不可能

---

对此有何看法？

我建议使用

元素。scrollIntoView（）

还可以将此添加到css中，以使滚动效果平滑：

html {
  scroll-behavior: smooth;
}

---

错误的原因很简单。选择器

a[href^=“#”]

查找其

href

属性以

#

开头的所有锚点，包括仅

的锚点。您稍后将该

href

用作选择器（

$（$.attr（此“href'））

）。就其本身而言，

#

不是有效的选择器

您可能希望针对其

href

属性以

#

开头，但不仅仅是

#

的所有锚点，这可以通过以下方式实现：

$（文档）。在（'click'，'a[href^=“#”]：非（[href=“#”]），函数（事件）{
console.log（“重”）；
event.preventDefault（）；
$（'html，body'）。设置动画({
scrollTop:$（$.attr（此'href'））.offset（）.top
}, 500);
});























































沉重

















在执行任何代码或制作任何动画之前，可以检查元素的href是否为“#”

$(document).on('click', 'a[href^="#"]', function (event) {
   if($(this).attr('href')!=="#"){
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
   }
});