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; }
very nice and useful for beginner.
ReplyDeleteAnil kumar
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