网页的单页面滚动做法
主要用到锚点知识点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>单页面滚动</title> <script src="http://code.jquery.com/jquery-1.5.js"></script> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:900px; margin: 0 auto; background:#FFBFAA;} .hd{ height:30px; text-align:right;position:fixed;z-index:9999;background:#000;width:900px;float:right;top:0;} .hd li{ float:left; list-style:none;} .hd li a{ display:block; height:30px;line-height: 30px;text-align:center; margin-right:10px; background:#FF9FAA; font:16px "微软雅黑"; color:#fff; font-weight:700px;width:100px;} hd li a.no_con{display:none;} .hd li a.active{background:#000;} .home{ height:350px; background:#D4DF00;} .about{ background:#FF3F55;} .link{ background:#f1f1f1;} .mian_body{padding-top:30px;} .mian_body,.hd ul{ position:relative;} </style> </head> <body> <div class="wrapper"> <div class="hd"> <ul> <li><a rel="scroll" href="#home" class="active">home</a></li> <li><a rel="scroll" href="#about">about</a></li> <li><a rel="scroll" href="#contact">contact</a></li> </ul> </div> <div class="mian_body"> <div id="home" class="home">home内容</div> <div id="about" class="home about">about内容</div> <div id="contact" class="home link">contact内容</div> <div class="home">底部内容</div> </div> </div> <script> var anchor_scroll_speed =350; $.scroll_to = function(element, speed, offset) { if (!offset) { var offset = 0; } $("html, body").animate({ scrollTop: element.offset().top + offset }, speed); }; $(function(){ $("a[rel~='scroll']").click(function(e) { var self = $(this); e.preventDefault(); var anchor = self.attr("href"); $.scroll_to($(anchor), anchor_scroll_speed,-30); }); $(".hd a").click(function(e) { var self = $(this); e.preventDefault(); $(".hd a").removeClass("active"); self.addClass("active"); }); }) </script> </body> </html>
关注web前端