从WP导航到不同页面的链接锚点

我有一个导航栏，链接到首页上的不同锚点。当我在首页使用导航中的链接时，它会平滑地滚动到正确的ID。但是当我去到一个子页面/其他页面时，我想让导航栏直接发回我的首页和选择的ID（锚点）。我认为与平滑滚动JavaScript有一些冲突，但我可能是错的。从WP导航到不同页面的链接锚点

我的自定义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; 
    }); 
});

来源

2017-08-31 csk87

我真的是你想要什么来实现或有什么问题不明白.. – Stephen

的问题是，我的导航不要送我回我的FrontPage和正确的#anchor当IM子页面。当我点击菜单/导航栏中的链接时，没有任何反应。但如果我在我的首页上导航工作，并滚动到正确的锚分区。 – csk87

好吧，你可以只针对链接与哈希在他们中，就像这样 $（'。nav.navbar-nav a [href * =“＃”]'）。on（...）; – Stephen

的问题是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; 
     }); 
});

来源

2017-08-31 17:35:10 FluffyKitten

是的，我打了preventDefault是问题。但问题仍然存在，即使我从我的js中删除'e.preventDefault（）;'。菜单链接将无法正常工作，除非我在我的主页上。 – csk87

猜猜我的浏览器没有更新scroll.js足够快：P现在它就像一个魅力！ thx @FluffyKitten – csk87

从WP导航到不同页面的链接锚点

回答

相关问题