锚标签与滚动转换不会正确地相互链接

Question

所以我有这个固定的菜单栏：

我都在一个很长的网页，这些部分，每个链接连接到别的地方在页面上。我也有以下的JavaScript，用于使链接滚动到他们的位置，而不是跳转到他们的位置：

但是，当用户单击链接，在菜单栏中，它只滚动到顶部（用于例如，如果我在页面的中间位置点击“我们的服务”，则跳转到“家”）。我相信这与我的第一线有关，但我不是专家。有任何想法吗？

//Make anchor tags scroll to link instead of jumping 
 
    $('a[href^=\\#]').on("click",function(e){ 
 
     var sc= $(this.hash); 
 
     var sc=sc.length&&t||$('[name='+this.hash.slice(1)+']'); 
 
     if(sc.length){ 
 
      var tOffset=sc.offset().top; 
 
      $('html,body').animate({scrollTop:tOffset-20},'slow'); //Speed of transition 
 
      e.preventDefault(); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t \t <div class="menu header hidden-sm-down"> 
 
\t \t \t <a href="#home" title="Home">Home</a> 
 
\t \t \t <a href="#about" title="About">About</a> 
 
\t \t \t <a href="#services" title="Experience">Our Services</a> 
 
\t \t \t <a href="#contact" title="Contact">Contact</a> 
 
\t \t </div> 
 
</div>

更新：我要补充，因为它似乎是问题的一部分，我有一些额外的JS，你向下滚动，增加了类的部分。这用于在您滚动时使菜单栏css更改。代码为：

//Make the top menu bar appear when the user scrolls down on the page 
$(window).scroll(function() {  
      var scroll = $(window).scrollTop(); 
      var objectSelect = $("#changeHeader"); // Where the change should occur 
      var objectPosition = objectSelect.offset().top; 
      if (scroll > objectPosition) { 
       $(".header").addClass("headerAppear"); // Adds class "headerAppear" once scrolling past the objectPosition 
      } else { 
       $(".header").removeClass("headerAppear", {duration:500}); 
      } 
     }); 

Answer 1

不知道你想做什么，但你的任务比你的实现要容易得多。获得从href的元素属性

$('a[href^=\\#]').on("click",function(e){ 
 
    var sc= $($(this).attr('href')); 
 
    if(sc.length){ 
 
     var tOffset = sc.offset().top; 
 
     $('html,body').animate({ 
 
      scrollTop:tOffset-20 
 
     },'slow'); 
 
     e.preventDefault(); 
 
    } 
 
});

.block { 
 
    height: 1000px; 
 
} 
 
.menu { 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="menu header hidden-sm-down"> 
 
    <a href="#home" title="Home">Home</a> 
 
    <a href="#about" title="About">About</a> 
 
    <a href="#services" title="Experience">Our Services</a> 
 
    <a href="#contact" title="Contact">Contact</a> 
 
    </div> 
 
    <div class='block' id='home'>Home</div> 
 
    <div class='block' id='about'>About</div> 
 
    <div class='block' id='services'>Our Services</div> 
 
    <div class='block' id='contact'>Contact</div> 
 
    </div>

Answer 2

这似乎您正在使用引导。简单的是使用query.easing和scrolling-nav库。这将减少你所有的JavaScript代码，并添加到该部分的平滑滚动。

我创建捣鼓你：

https://jsfiddle.net/tr5dm3tx/

Answer 3

感谢您的帮助，但我想通了，我的错误。原来我正在运行一个比我的代码更高的Jquery。切换到2.1.1，我没有任何问题。谢谢！