|
PHP - .scrolltop
Hi there, I am needing a bit of advice.
I am currently working on a new site, and I have my links at the top in a fixed header, and the rest of my content throughout the same page. http://sr.bluepigeon.com have a look it will make more sence then me describing it. Now i have worked a little bit with jQuery but do not know all the ins and outs of it, which is why I am a bit stuck. Now when I click one of the links on the page, I want the page to scroll down to that div and display it in the center of the screen. Now the code I am using (see below) obviously works on my laptops screen size but won't be as 'perfect' and centered on other sized screens. If i user the following code without each of the offsets then it will scroll to the correct div, but it will be displayed on the top of the page and not centered in the middle.
What I am wanting to know, is, is it possible to make it scroll to a div and then center the div in the middle of the screen? If not how could i get as close as possible to this?
$(document).ready(function(){
$("#blogl").click(function() {
$('html, body').animate({
scrollTop: $("#blog").offset().top
}, 2000);
});
$("#racel").click(function() {
$('html, body').animate({
scrollTop: $("#race").offset().top
}, 2000);
});
$("#aboutl").click(function() {
$('html, body').animate({
scrollTop: $("#about").offset().top +700
}, 2000);
});
$("#srl").click(function() {
$('html, body').animate({
scrollTop: $("#sr").offset().top +100
}, 2000);
});
$("#donatel").click(function() {
$('html, body').animate({
scrollTop: $("#donate").offset().top
}, 2000);
});
});
Thanks for your help again
Eric
Similar TutorialsI am trying to make a simple vertical scrolling slideshow type page. I have 1 div that is 100% width and height of the body and inside that 4 divs that are 100% w&h one below the other. In each "slide" div is an input button with an onclick call to a JavaScript function that uses jquery animate and scrolltop to move to the next div. Moving from the first to second is OK. It will not move from second to third. If I set each inner divs height to 90%, I can see the third div's next button. Clicking that moves the third slide to the top, though it is supposed to move the forth slide to the top. Not sure what I'm missing? I hope my attempt to paste the code on my note 3 works OK! Thanks for even looking! Nick <code> <html> <head> </head> <body style="margin:0px;padding:0px;"> <style> .a_slide { width:100%;height:100%;background-color:blue; } .b_slide { width:100%;height:100%;background-color:green; } .c_slide { width:100%;height:100%;background-color:blue; } .d_slide { width:100%;height:100%;background-color:green; } </style> <div style="width:100%;height:100%;overflow:hidden;margin-left:auto;margin-right:auto;" id="container" name="container" class="container"> <div class="a_slide" id="a_slide">a <input type="button" onclick="move(this.name);" name="b_slide" value="Next Page"> </div> <div class="b_slide" id="b_slide">b <input type="button" onclick="move(this.name);" name="c_slide" value="Next Page"> <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> <div class="c_slide" id="c_slide">c <input type="button" onclick="move(this.name);" name="d_slide" value="Next Page"> <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> <div class="d_slide" id="d_slide">d <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> </div> <script type="text/javascript" src="http://ajax.googleap...n.js"></script> <script type="text/javascript"> function move(to_who) { $('.container').animate({scrollTop: $("."+to_who).offset().top},'slow'); }; </script> </body> </html></code> |
|||||||