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

5 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
  3. This is quite a good blog.Are you also searching for Nursing Research Paper Help? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

    ReplyDelete
  4. I love this. It is soo informative. Are you also searching for cheap assignment help we are the best solution for you. We are best known for delivering the best services to students without having to break the bank

    ReplyDelete
  5. I love this. It is soo informative. Are you also searching for Swedish assignment writing help we are the best solution for you. We are best known for delivering the best services to students without having to break the bank

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts