SodhanaLibrary

By using jQuery scrollTop function we can scroll page vertically.

Page Navigation With Side Bar menu :

DEMO - Vertical Page Navigation with Side Bar Menu

Markup :

<div id="sidebar">
<div>
 <h1>jQuery scroll to DIV</h1>
</div>
 <div  class="link" targerdiv="div1"><span>DIV-1</span></div>
 <div  class="link" targerdiv="div2"><span>DIV-2</span></div>
 <div  class="link" targerdiv="div3"><span>DIV-3</span></div>
 <div  class="link" targerdiv="div4"><span>DIV-4</span></div>
</div>
<div class="nDiv" id="div1">
DIV - 1
</div>
<div class="nDiv" id="div2">
DIV - 2
</div>
<div class="nDiv" id="div3">
DIV - 3
</div>
<div class="nDiv" id="div4">
DIV - 4
</div>

Script :

  $(window).load(function(){
       function goToByScroll(id){
           $('html,body').animate({
           scrollTop: ($("#"+id).offset().top)},
           'slow');
       }

       $(".link").click(function(e) { 
           goToByScroll($(this).attr("targerdiv")); 
       });
  });

CSS :

.nDiv {
width:75%;
height:500px;
font-size:50px;
text-align:center;
padding-top:200px;
}
.link {
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.link:hover {
background-color:blue;
border-radius:5px;
cursor:pointer;
}
body {
background-color: rgb(126,200,237);
font-family: ff-tisa-web-pro, serif;
color: #fff;
font-weight: bold;
position:relative;
}

#sidebar {
height:100%;
position:fixed;
background-color:rgb(151,211,240);
top:0px;
right:0px;
width:25%;
text-align:center;
z-index:1;
}

Page Navigation With Header :

DEMO - Vertical Page Navigation with Header

Markup :

<div id="header">
<div class="left">
 <h1>jQuery scroll to DIV</h1>
</div>
<div class="right">
 <span class="link" targerdiv="div1">DIV-1</span>
 <span class="link" targerdiv="div2">DIV-2</span>
 <span class="link" targerdiv="div3">DIV-3</span>
 <span class="link" targerdiv="div4">DIV-4</span>
</div>
</div>
<div class="nDiv" id="div1">
DIV - 1
</div>
<div class="nDiv" id="div2">
DIV - 2
</div>
<div class="nDiv" id="div3">
DIV - 3
</div>
<div class="nDiv" id="div4">
DIV - 4
</div>

Script :

$(window).load(function(){
function goToByScroll(id){
$('html,body').animate({
 scrollTop: ($("#"+id).offset().top - $("#header").height())},
 'slow');
}

$(".link").click(function(e) { 
 goToByScroll($(this).attr("targerdiv")); 
 });
});

CSS :

.nDiv {
width:100%;
height:500px;
font-size:50px;
text-align:center;
padding-top:200px;
}
.link {
padding: 5px 10px 5px 10px;
}
.link:hover {
background-color:blue;
border-radius:5px;
cursor:pointer;
}
body {
background-color: rgb(126,200,237);
font-family: ff-tisa-web-pro, serif;
color: #fff;
font-weight: bold;
}
#header {
width:100%;
position:fixed;
background-color:rgb(151,211,240);
top:0px;
left:0px;
}
.left {
margin-left:10px;
float:left;
}

.right {
margin-right:10px;
float:right;
padding-top:30px;
}

#div1 {
margin-top:80px;
}