Question

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

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

导航栏由来自Wordpress菜单ex：

的自定义链接组成

url：http://localhost:8080/fitnesstravels/#destinations

名称：目的地

当我转到像http://localhost:8080/fitnesstravels/destinations/rhodos

这样的子页面时

我导航栏中的菜单链接名为＆＃34;目的地＆＃34;链接到http://localhost:8080/fitnesstravels/#destinations主播（如果我正确点击＆＃34;在新标签中打开链接＆＃34;我会发送到正确的地方。但是当我尝试使用菜单链接时没有任何反应。

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

从WP导航

1 个答案: