javascript - 在 anchor 中使用 # 实现 JavaScript 功能

Question

与 CSS 中的大多数内容一样，有可行的方法，也有正确的方法。不幸的是，我不是 CSS 专家。

我为很多事情设置了“#”我的 hrefs——比如打开菜单等。

不过最近发现需要平滑滚动到页面的某个地方。经过一番调查，我想出了这段代码:

$('a[href^="#"]').click(function (e) {
    e.preventDefault();

    $(".body-wrap").animate({
        scrollTop: $(this.hash).offset().top
    }, 300);
});

没有问题 - 它有效。

但是，它也会导致与我用于其他 javascript 触发器的页面上所有其他基于“#”的 href 发生冲突 - 特别是 a[href^="#"]。

我的问题是，有没有更好的方法来解决这个问题，它仍然是通用的？例如，您可能会说 - 不需要将 # 分配给所有 href - 我不确定会产生什么影响，或者可能有添加到上面的选择器以使其更具体的方法 - 例如，开始带有#，但后面有其他字符。

这种事情必须每天挑战开发人员，因此必须有首选的技术或模式来干净地处理这种情况。

Answer 1

我的首选解决方案是给他们上课

$(".scrollLink").on("click",function (e) {
  e.preventDefault();
  $(".body-wrap").animate({
    scrollTop: $(this.hash).offset().top
  }, 300);
});