SodhanaLibrary

jQuery scroll is simple property with great usage. We can make awesome page navigation with this scrolling property.

Page Navigation with Header

DEMO - Horizontal 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({
scrollLeft: $("#"+id).offset().left},
'slow');
}

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

Define CSS like below :

.nDiv {
width:100%;
height:500px;
font-size:50px;
text-align:center;
padding-top:200px;
top:80px;
position:absolute;
display:inline;
}
.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;
z-index:1;
}
.left {
margin-left:10px;
float:left;
}

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

#div1 {
left:0px;
}
#div2 {
left:100%;
}
#div3 {
left:200%;
}
#div4 {
left:300%;
}

"nDiv" refers navigation page

"sidebar" refers right side bar