By using jQuery scrollTop function we can scroll page vertically.

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 :

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

2 comments:

  1. very nice and useful for beginner.
    Anil kumar

    ReplyDelete
  2. There are many religious research paper services and Religion Assignment Writing Services to choose from for those stuck with their religion & theology essay services and theology & religion writing services.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts