navbar에서 ID로 스크롤하는 방법

Question

javascript/jQuery를 사용하는 abegginer이지만 navbar 요소를 클릭 한 다음 해당 페이지로 이동하여 id에 해당하는 페이지로 스크롤합니다.

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

누구나하는 방법에서 나에게 도움이 될 수 있습니다

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

내 시도가 https://github.com/flesler/jquery.scrollTo/blob/master/README.md를 사용하여 : (IDS : #home, # 정보, #portafolio, #contact)

여기 내 메뉴 바 목록입니다 심지어 작동을위한 적절한 기능을 만들 수 있습니까? 감사.

Answer 1

jQuery를 사용하지 않고도이 작업을 수행 할 수 있습니다. navbar 요소의 앵커 태그에 있습니다. 섹션의 ID를 href에 넣으십시오.

그래서 여기에 '대한'과 '접촉'

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

같은은 약 접촉 부분의 식별자입니다.

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입니다. 정보 링크를 클릭하면 특정 div로 스크롤됩니다.