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
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.
ReplyDeleteI 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
ReplyDeleteI 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
ReplyDeleteThanks for your post! I am a student of Marketing speciality in New York State University and and among personal marketing plan examples which I ordred at BestWritingService I have programming classes and your blogging page helps me with this. Thank you both!
ReplyDelete