Comment faire défiler jusqu'à un ID à partir d'une barre de navigation

Question

Je suis abegginer en utilisant javascript/jQuery, mais je veux cliquer sur un élément de la barre de navigation, puis faites défiler la page jusqu'à l'identifiant correspondant. (Ids: #Page, #about, #portafolio, #contact)

Voici ma liste navbar:

<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> 

Ma tentative à l'aide https://github.com/flesler/jquery.scrollTo/blob/master/README.md:

$('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'); 

Tout le monde peut me aider comment même créer une fonction appropriée pour que cela fonctionne? Merci.

Answer 1

Vous pouvez le faire sans l'utilisation de jQuery. Dans les balises d'ancrage dans vos éléments de barre de navigation. mettre l'identifiant de la section dans le href.

donc quelque chose comme

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

Ici, le 'à propos' et 'contact' sont les ids de la section et sur les contacts.

Answer 2

Je vais vous montrer un exemple où vous pouvez faire les changements nécessaires dans votre code.

<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" etc sont les identifiants donnés à la div. Maintenant, au clic sur le lien A propos, il va défiler vers la div particulière.