Vertical Page Navigation with jQuery scrollTop

Saturday, 28 December 2013 | Posted by
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;
}
Labels:

5 comments:

  1. Unknown8 January 2015 at 03:40

    very nice and useful for beginner.
    Anil kumar

    ReplyDelete
  2. Term Paper Writing Services3 August 2020 at 00:00

    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. Cheap assignment writers16 July 2021 at 22:28

    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. Cheap assignment writers16 July 2021 at 22:29

    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. Cheap assignment writers16 July 2021 at 22:30

    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

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts