Javascript 具有绝对路径的锚链的平滑运动

我正在使用下面的jQuery在单击它们之后给（顶部菜单栏）一个平滑的移动

当链接为

时，此功能正常工作；但是，一旦在哈希标记

前面加上完整地址，它就不起作用了

我必须使用绝对路径，所以当从内部页面单击链接时，它们仍然会将您带回主页和正确的位置

    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
            $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });

---

你知道如何修改代码，使其在具有绝对路径的链接上工作吗

在我看来，不要使用选择器，而是在所有要设置动画的链接中添加一个类，如

.anchor link

或其他类似的类

然后将代码更新为

  $('.anchor-link').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
            $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });

---

您不需要为此使用jQuery，我也不认为jQuery动画会产生最佳效果。您可以在css3中完成这一切，并对动画进行更多控制。下面是一个类似于您正在尝试做的事情的示例。正如您所看到的，您只需设置

div

的id，然后使用如下内容：

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
    background: #000;
    color: #fff;
}

当您单击导航按钮时，让css知道您的目标是特定的div。然后使用css3转换

 -webkit-transition: all .8s ease-in-out;
 -moz-transition: all .8s ease-in-out;
 -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;

---

根据需要设置div的动画。

但如果有人在内部页面（

http://domain.com/internal.html

）并单击（

http://domain.com#services

）返回主页，是吗？我不确定我是否理解您在这里提出的问题。将jquery选择器更改为类而不是仅针对锚定链接，将使您发布的代码在具有该类的任何链接上工作。这就是你想要实现的吗？我同意将选择器更改为类；但是，如果有人点击

http://domain.com#services

从内部页面返回主页时，他们并没有真正“单击”链接，因此不会触发jQuery“单击”事件（因为页面已重新加载）。这有意义吗？@farjam你是说你希望外部链接出现动画吗？@mituw16你提出的代码（除了不同类型的选择器外，与我的代码类似）目前在我的网站上不起作用。一旦点击链接，它不会给链接一个平滑的过渡。那么你需要做的是防止新加载的页面滚动到目标锚，然后将其动画化到正确的位置。