Horizontal Page Navigation with jQuery scrollLeft

Friday, 27 December 2013 | Posted by
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")); 
});
});

Labels:,

2 comments:

  1. Term Paper Writing Services2 August 2020 at 23:59

    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. Andrew Lewis17 October 2020 at 02:48

    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

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts