网页的单页面滚动做法

最新推荐文章于 2023-06-29 19:20:06 发布

weixin_30737433

最新推荐文章于 2023-06-29 19:20:06 发布

阅读量172

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hxh-hua/archive/2013/04/10/3013072.html

版权

主要用到锚点知识点

<!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>

转载于:https://www.cnblogs.com/hxh-hua/archive/2013/04/10/3013072.html

weixin_30737433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页的单页面滚动做法

主要用到锚点知识点<!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/xh...
复制链接

扫一扫