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")); }); });
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.
ReplyDeleteWriting assignment with deadline