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

Page Navigation with Header

Markup :

Here "header" shows Title and navigation links.
"nDiv" class refers Navigation Page.

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

Page Navigation with Side Bar

Here the was presented at right side or left side of Body.

Markup :

"nDiv" refers navigation page
"sidebar" refers right side bar

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

CSS :

.nDiv {
width:75%;
height:500px;
font-size:50px;
text-align:center;
padding-top:200px;
top:80px;
position:absolute;
display:inline;
}
.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;
}

#div1 {
left:0px;
}
#div2 {
left:75%;
}
#div3 {
left:150%;
}
#div4 {
left:225%;
padding-right:25%;
}

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

Script :

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

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

2 comments:

  1. Custom criminology assignment writing service seekers have been on the rise lately since most learners need Criminology Research Paper Services, criminology research writing help and criminology essay writing services.

    ReplyDelete
  2. I am keen to learn coding and specially a j-query which is very tricky to set in between the coding to perform extra action.
    Writing assignment with deadline

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts