javascript - 具有绝对路径的 anchor 链接的平滑移动

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;
        });
    });