Navbar鏈接滾動到頂部

我想要做的是，當在導航欄上單擊「Home」時，它應該滾動到頁面的頂部，但我似乎無法得到任何工作。我要讓它工作在相同的.html所以我在同一頁上使用Navbar鏈接滾動到頂部

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container text-center"> 
     <div id="navbar" class="navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#feedback">Feedback</a></li> 
       <li><a href="#about">About me</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

<script> 
    $("#home").on("click", function() { 
     $("body").scrollTop(0); 
    }); 
</script>

來源

2017-07-07 jv96

Html不需要jQuery來做到這一點。只需在你的url #home中寫入，並將body ID設置爲「home」，它將指向該id，因爲它是body，它將滾動到頂端。除非你不想使用它，否則不需要jquery。 – user5014677

在這裏你可以用這個代碼。

您不能直接在jQuery中使用#home，因爲它不是id。

所以，你應該使用這樣$("a[href='#home']").on("click", function() {

希望這個例子可以幫助你。

$("a[href='#home']").on("click", function() { 
 
    $('body').animate({ 
 
      scrollTop: 0 
 
    }, 
 
    500); //this will helps you to smooth scroll to top 
 
});

body { 
 
height: 500px; 
 
} 
 
nav { 
 
position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container text-center"> 
 
      <div id="navbar" class="navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li><a href="#home">Home</a></li> 
 
        <li><a href="#feedback">Feedback</a></li> 
 
        <li><a href="#about">About me</a></li> 
 
        <li><a href="#contact">Contact</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

來源

2017-07-07 07:54:57

是這個代碼將不會遺憾的是工作，嘗試：

$("a[href='#home']").click(function(){ 
    $('html, body').animate({scrollTop : 0},800); 
    return false; 
});

最良好的祝願

來源

2017-07-07 07:57:47

我不認爲body有滾動條。你需要找到div containts滾動條。只需簡單地右鍵單擊滾動條並檢查它

來源

2017-07-07 07:57:51 JDZ

Navbar鏈接滾動到頂部

回答

相關問題