您的位置：首页 > 其它

网页的单页面滚动做法

2013-04-10 20:31 183 查看
主要用到锚点知识点

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航