CODEWITHSUNDEEP
javascriptjqueryhtml
Vineonardo
Vineonardo

Reputation: 183

How to make jQuery Up & Down arrow buttons to scroll body vertically step by step?

I'm creating a single page website with 5 sections one below another on a single page. I need two buttons, Up & Down arrows near scroll bar to help users scroll using these buttons. These buttons should sequentially scroll to previous & next section respectively. Basically we are scrolling the whole body.

For example, navigation is lie Home, About, Projects, Gallery & Contact.

When on Home, and clicked Down arrow, body should scroll to About and stop. If on About, the Up button should bring us to the Home section.

I'm a jQuery n00b so, kindly help me with code examples.

Code so far:

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

Thank you.

Upvotes: 2

Views: 8797

Answers (1)

ThdK
ThdK

Reputation: 10546

You can make use of the jquery animate function: 

<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);
}

Source and demonstration: link

Upvotes: 1

Related Questions