使用#in锚定实现javascript功能

像CSS中的大多数东西一样，有一些方法是有效的，也有一些正确的方法。不幸的是，我不是一个CSS大师

我设置了“#”我的HREF用于很多事情——比如打开菜单等

然而，我最近发现需要平滑地滚动到页面上的某个位置。经过一些调查，我得出了以下代码：

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

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

没什么问题，它能用

但是，它也会导致与我用于其他javascript触发器的页面上的每一个基于href的“#”发生冲突，特别是

a[href^=“#”]

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

---

这类事情每天都会给开发人员带来挑战，因此必须有首选的技术或模式来干净地处理这类问题。

我首选的解决方案是给他们一个类

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

---

最佳实践是在特定于javascript的类前面加上

js-

$(document).on('click', '.js-scroll-link', function(e) {
  e.preventDefault();

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

---

如果您不想/不需要使用类，可以在设置动画之前始终检查

this.hash

是否为空字符串。在这种情况下，您需要将空的/不可见的

添加到页面顶部，并将

href

设置为

#top

，以显示要滚动到页面顶部的“平滑滚动链接”

---

但是最好使用类。

您可以将选择器更改为

a[href^=“#”]：not（[href=“#”]）

，这在IE8和大多数浏览器上可能会稍微慢一点。为此，您可以使用

.not（'[href=“#”]'）

方法或

.filter（':not（[href=“#”]）

方法。这两种方法都应该很好。谢谢大家的回答——选择mplungjan的答案是因为它是多功能的，而且是第一个通过的。然而，投票通过了所有其他的好答案-neilhem，是在类前面添加“js”的好时机。这是一个好主意，它允许运行函数滚动到顶部。它可以像使用

$（this.hash | document）.offset（）.top

（不推荐）或

this.hash一样简单$（this.hash）.offset（）.top:0