Question

我正在使用以下jQuery为my links（顶部菜单栏）提供一个平滑的动作。

当链接为<a href="#services">link</a>时，此方法正常;但是，一旦将完整地址添加到哈希标记<a href="http://domain.com#services">link</a>之前，它就不起作用。

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

    $('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;
        });
    });

有关如何修改该代码以使其适用于具有绝对路径的链接的任何想法？

Answer 1

而不是使用选择器，在我看来是疯了，在你想要设置动画的所有链接中添加类似.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;
        });
    });

Answer 2

您不需要为此使用jQuery，我也不认为jQuery动画会产生最佳效果。您可以在css3中完成所有操作，并对动画有更多控制权。这是jsfiddle类似于你想要做的事情。正如您所看到的那样，您只需设置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设置动画。

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

2 个答案: