链接到来自 WP 导航的不同页面上的锚点

Question

我有一个导航栏，可以链接到起始页上的不同锚点。当我使用起始页导航中的链接时，它会平滑滚动到正确的 ID。但是当我转到子页面/其他页面时，我希望导航栏将我直接发送回起始页和选择的 ID（锚点）。我认为平滑滚动 javascript 存在一些冲突，但我可能是错的。

我的自定义 WP 主题的名称是：fitnesstravels。​​

导航栏由来自 Wordpress 菜单的自定义链接组成：

网址：http://localhost:8080/fitnesstravels/#destinations

名称：目的地

当我转到子页面时：http://localhost:8080/fitnesstravels/destinations/rhodos

导航栏中名为“目的地”的菜单链接链接到http://localhost:8080/fitnesstravels/#destinations 锚点（如果我右击“在新选项卡中打开链接”我会发送到正确的位置。但是当我尝试简单地使用时没有任何反应菜单链接。

js:

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

Answer 1

问题是e.preventDefault()。

我已经完全按照您在网站上尝试的方式完成了，并且以您描述的相同方式，唯一显着的区别是我的平滑滚动 jQuery 不使用 preventDefault。

这是（相关部分）我的平滑滚动 jQuery：

var $root = $('html, body');

$( ".navbar" ).on( "click", "li a", function(  ) {
    var pageanchor = this.hash;
    if (pageanchor)
        $root.animate({ scrollTop: $(pageanchor).offset().top}, 500);
});

如果我更改代码以使用您的变量名称和动画设置，除了preventDefault 之外，它几乎与您的相同。

$(document).ready(function() {
    $('.nav.navbar-nav a, .arrow a[href^="#"]').on('click',function (e) {
        var target = this.hash;
        if (target)
            $('html, body').animate({ 
                scrollTop: $(target).offset().top-50
            }, 1200, 'swing', function () {
                window.location.hash = target;
        });
});