위로 jQuery를 만드는 방법 위쪽 및 아래쪽 화살표 버튼을 사용하여 본체를 세로로 단계별로 스크롤 할 수 있습니까?

Question

한 페이지에 5 개의 섹션이있는 단일 페이지 웹 사이트를 만들고 있습니다. 사용자가이 버튼을 사용하여 스크롤 할 수 있도록 두 개의 버튼, 위로 & 아래쪽 화살표가 스크롤 막대 옆에 필요합니다. 이 단추는 다음 번 섹션으로 이전 & 순차적으로 각각 스크롤해야합니다. 기본적으로 우리는 몸 전체를 스크롤하고 있습니다.

예를 들어, 내비게이션이란 집, 정보, 프로젝트, 갤러리 & 연락처입니다.

집에있을 때 아래쪽 화살표를 클릭하면 본문이 정보로 이동하고 중지해야합니다. About (정보)에서 Up 버튼을 누르면 Home 섹션으로 이동합니다.

저는 jQuery n00b입니다. 친절하게도 코드 예제를 도와주세요. 지금까지

코드 :

<div id="arrows"> 
<a href="javascript:;" id="arrow-up">&uarr;</a> 
<a href="javascript:;" id="arrow-down">&darr;</a> 
</div> 

감사합니다.

Answer 1

당신은 JQuery와 애니메이션 기능을 사용 할 수 있습니다 :

<div id="HomeSection"> 
    <h2>Home</h2> 
    <input type="button" onclick="scollWin('AboutSection');" value="Scroll to Next" />  
</div> 

<div id="AboutSection"> 
    <h2>About</h2> 
    <p>About your page....</p> 
    <input type="button" onclick="scollWin('HomeSection');" value="Scroll to Previous" /> 
    <input type="button" onclick="scollWin('ProjectSection');" value="Scroll to Next" /> 
</div> 

JQuery와 :

function scrollWin(id){ 
    $('html,body').animate({ 
     scrollTop: $("#" + id).offset().top 
    }, 2000); 
} 

소스 및 데모 : link