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

I'm using the following jQuery to give my links (top menu bar) a smooth movement once they are clicked on.

我正在使用以下jQuery为我的链接(顶部菜单栏)提供一个平滑的动作,一旦它们被点击。

This works fine when the link is <a href="#services">link</a>; however, it does not work once the full address is prepended to the hash tag <a href="http://domain.com#services">link</a>.

当链接链接时,此工作正常;但是,一旦将完整地址添加到散列标记链接之后,它就不起作用。

I have to use the absolute path so when the links are clicked from internal pages, they still bring you back to the homepage and the right location.

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

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

Any idea on how to modify that code so it works on links with absolute paths?

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

2 个解决方案

#1

Instead of using a selector, that in my opinion is crazy, add a class like .anchor-link or something to all of the links you want to animate.

而不是使用选择器,在我看来是疯了,添加类似.anchor-link的类或其他类似于你想要动画的所有链接。

Then update your code to

然后将您的代码更新为

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

#2

-1

You don't need to use jQuery for this nor do I think jQuery animations would yield the best results. You can do this all in css3 and have more control over the animation. Here is a jsfiddle of something similar to what you are trying to do. As you can see you just set the id of the div and then use somthing like this:

你不需要为此使用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;
}

To let the css know you are targeting that specific div when you click on the nav button. Then you use css3 transition

当您单击导航按钮时,让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;

To animate the div as you want.

根据需要为div设置动画。

#1