錨標籤與滾動轉換不會正確地相互鏈接

我都在一個很長的網頁，這些部分，每個鏈接連接到別的地方在頁面上。我也有以下的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}); 
      } 
     });

來源

2017-05-26 Adam H

這究竟應該做什麼？ 'sc.length && t' – hasen

導航欄滾動到頁面上的各個點。 – rpivovar

不知道你想做什麼，但你的任務比你的實現要容易得多。獲得從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>

來源

2017-05-26 06:53:19

加1對於此工作滾動不跳，但我更新我的問題與更多的代碼在我的網頁上。 –

@AdamH我沒有看到更新中的問題。請指定更新的問題。而且，用於changeHeader的HTML會很好。 –