navbarからidにスクロールする方法

Question

javascript/jQueryを使用しているabegginerですが、navbar要素をクリックして、それに対応するidにページをスクロールしたいとします。 （IDS：#home、#about、#portafolio、#contact）

ここに私のナビゲーションバーのリストです：

https://github.com/flesler/jquery.scrollTo/blob/master/README.mdを使用して

<nav class="navbar navbar-default navbar-static-top navbar-fixed-top"> 
    <div class="container-fluid"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">About</a></li> 
    <li role="presentation"><a href="#">Portafolio</a></li> 
    <li role="presentation"><a href="#">Contact</a></li> 
    </ul> 

私の試み：

$('ul li').first().click().scrollTo('#home'); 
$('ul li').eq(1).click().scrollTo('#about'); 
$('ul li').eq(2).click().scrollTo('#portfolio'); 
$('ul li').eq(3).click().scrollTo('#contact'); 

誰もがどのようにして私を助けることができますそれが機能するための適切な機能を作成することさえできますか？ありがとう。

Answer 1

jQueryを使用せずに実行できます。 navbar要素のアンカータグ内にあります。セクションのidをhrefに入れてください。

だから、ここで

<li><a href="#about">About</a></li> 
<li><a href="#contact">Contact</a><li> 

のようなもの「について」と「接触」は程度との接触部分のIDです。

Answer 2

コードで必要な変更を行うことができる例を示します。

<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#about">ABOUT</a></li> 
    <li><a href="#services">SERVICES</a></li> 
    <li><a href="#portfolio">PORTFOLIO</a></li> 
    <li><a href="#pricing">PRICING</a></li> 
    <li><a href="#contact">CONTACT</a></li> 
    </ul> 
</div> 

"#about"、 "＃services"などはdivに与えられたIDです。 Aboutリンクをクリックすると、特定のdivにスクロールします。