1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Jquery Page Scrolling</title><script type="text/javascript">$("document").ready(function() { $('.top-title').click(function(){ $('html, body').animate({ scrollTop: $(".middle").offset().top }, 2000); }); $('.middle-title').click(function(){ $('html, body').animate({ scrollTop: $(".bottom").offset().top }, 2000); }); $('.bottom-title').click(function(){ $('html, body').animate({ scrollTop: $(".top").offset().top }, 2000); });});</script><style>.top, .middle, .bottom{ padding:30px; }.top{ height:600px; background-color:#FFC; margin-bottom:30px; border:2px solid #FF9; }.middle{ height:600px; background-color:#FF9; border:2px solid #FF6; margin-bottom:30px; }.bottom{ height:600px; background-color:#FF6; border:2px solid #FF3; margin-bottom:30px; } .top-title, .middle-title, .bottom-title{ cursor:pointer; margin-top:300px; text-align:center; text-decoration:underline; font-size:32px; font-weight:700;} </style></head><body><h1>jQuery Page Scrolling</h1><div class="main"><div class="top"> <div class="top-title">Click Here to go to the middle box</div></div><div class="middle"> <div class="middle-title">Click Here to go to the bottom box</div></div><div class="bottom"> <div class="bottom-title">Click Here to go to the top box</div></div></div></body></html> |
