第四媒体酷站欣赏·超酷的锚点滑动效果代码果***查看网页特效

超酷的锚点滑动效果代码果

浏览指数：8855 日期：2008-7-25 10:08:37

超酷的锚点滑动效果代码果

锚点滑动效果代码由dezinerfolio提供

我们有时候在页面布局中会用到锚点定位，它的应用方法就是在要到达的地方加上锚点代码：<a name="top"></a>，在转向到达的地方加上控制代码<a href="top">返回首页</a>。

可是这种转向似乎很僵硬，这里给大家介绍的锚点滑动效果代码就很好的处理了这个问题。
演示效果：http://www.51add.com/2008/

JS代码插入在head之间，也可以单独使用一个JS文件，然后调用，锚点的位置你可以自己定义。

这个效果的实现是在原有的代码基础上加了一段控制脚本，具体实现方法如下：

<!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=utf-8" />
<title>锚点滑动效果代码果</title>
<style type="text/css">

* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.header_link{
	padding:50px;
	width:500px;
	display:block;
	clear:both;
	text-align:center;
	margin:0 auto;
	background-color: #FF3300;
}

.middle_link{
	background:#13aceb;
	padding:50px;
	width:500px;
	display:block;
	clear:both;
	text-align:center;
	margin:0 auto;
}

.footer_link{
	padding:50px;
	width:500px;
	display:block;
	clear:both;
	text-align:center;
	margin:0 auto;
	background-color: #009933;
}

p{
	clear:both;
	padding:20px;
	text-align:left;
}

a.51add{
	padding:10px 20px;
	background:#FFF;
	border:1px solid #000;
	color:#000;
	float:left;
	text-decoration:none;
	display:block;
	height:17px;
	width:185px;
	margin-left:15px;
}

a.51add:hover{
	background:#CCC;
}
a{
	color: #000000;
}
a:hover{}
</style>

Scroller = {
	// 修改滚动速度, 建议speed=50;
	speed:10,

gy: function (d) {
		gy = d.offsetTop
		if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
		return gy
	},

scrollTop: function (){
		body=document.body
	    d=document.documentElement
	    if (body && body.scrollTop) return body.scrollTop
	    if (d && d.scrollTop) return d.scrollTop
	    if (window.pageYOffset) return window.pageYOffset
	    return 0
	},

add: function(event, body, d) {
	    if (event.addEventListener) return event.addEventListener(body, d,false)
	    if (event.attachEvent) return event.attachEvent('on'+body, d)
	},

end: function(e){
		if (window.event) {
			window.event.cancelBubble = true
			window.event.returnValue = false
      		return;
    	}
	    if (e.preventDefault && e.stopPropagation) {
	      e.preventDefault()
	      e.stopPropagation()
	    }
	},
	
	scroll: function(d){
		i = window.innerHeight || document.documentElement.clientHeight;
		h=document.body.scrollHeight;
		a = Scroller.scrollTop()
		if(d>a)
			if(h-d>i)
				a+=Math.ceil((d-a)/Scroller.speed)
			else
				a+=Math.ceil((d-a-(h-d))/Scroller.speed)
		else
			a = a+(d-a)/Scroller.speed;
		window.scrollTo(0,a)
	  	if(a==d || Scroller.offsetTop==a)clearInterval(Scroller.interval)
	  	Scroller.offsetTop=a
	},

init: function(){
		Scroller.add(window,'load', Scroller.render)
	},

render: function(){
		a = document.getElementsByTagName('a');
		Scroller.end(this);
		window.onscroll
	    for (i=0;i<a.length;i++) {
	      l = a[i];
	      if(l.href && l.href.indexOf('#') != -1 && ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
	      	Scroller.add(l,'click',Scroller.end)
	      		l.onclick = function(){
	      			Scroller.end(this);
		        	l=this.hash.substr(1);
		        	 a = document.getElementsByTagName('a');
				     for (i=0;i<a.length;i++) {
				     	if(a[i].name == l){
				     		clearInterval(Scroller.interval);
				     		Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
						}
					}
				}
	      	}
		}
	}
}

Scroller.init();
/*-- END OF CODE --*/
</script>
</head>
<body >

<div class="header_link">
<h2>锚点滑动效果代码果</h2>
<p></p>

<a href="#footer" name="top" class="51add">GO TO FOOTER</a>
<a href="#middle" class="51add">GO TO MIDDLE</a>

<p>锚点滑动效果代码果</p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 
  致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 <br />
  </p>
</div>

<a href="#top" class="51add">GO TO TOP</a>
<a  href="#footer" name="middle" class="51add">GO TO FOOTER</a>

<p>锚点滑动效果代码果</p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
</div>

<a href="#top" name="footer" class="51add">GO TO HEADER</a>
<a href="#middle" class="51add">GO TO MIDDLE</a>

<p>锚点滑动效果代码果</p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
  <p>关于曾加高端品牌网站设计 <a href="http://www.51add.com" target="_blank">www.51add.com</a> 致力于高端品牌网站设计，工作中积累大量实际项目运作经验，以专业的敏锐的眼光分析每一个项目，为客户更全面的展示自己企业形象。   每个项目都代表一次进步， 因为与客户的磨合让我们知道我们需要改善的地方， 而每一个项目的完成让我们都有一次很好的总结。希望下一个项目能让你更满意。 </p>
</div>

</body>
</html>

特别说明：文本框里含有up/js/***.js内容的请用查看按钮查看演示！

评论者：Grnlzyyd
<a href= http://www.misterpoll.com/users/BuyOxycodone >Buy Oxycodone</a> [url=http://www.misterpoll.com/users/BuyOxycodone]Buy Oxycodone[/url]
发表时间：2009-1-10 18:18:22 [来自: 62.90.102.146]

评论者：Hnqidcwf
<a href= http://www.misterpoll.com/users/BuyNorvasc >Buy Norvasc</a> [url=http://www.misterpoll.com/users/BuyNorvasc]Buy Norvasc[/url]
发表时间：2009-1-10 18:14:06 [来自: 62.90.102.146]

评论者：Idujzfaf
<a href= http://www.misterpoll.com/users/BuyNicotine >Buy Nicotine</a> [url=http://www.misterpoll.com/users/BuyNicotine]Buy Nicotine[/url]
发表时间：2009-1-10 18:08:34 [来自: 62.90.102.146]

评论者：Megnrdbn
<a href= http://www.misterpoll.com/users/BuyNiacin >Buy Niacin</a> [url=http://www.misterpoll.com/users/BuyNiacin]Buy Niacin[/url]
发表时间：2009-1-10 18:03:43 [来自: 62.90.102.146]

评论者：Ekypaxhp
<a href= http://www.misterpoll.com/users/BuyNexium >Buy Nexium</a> [url=http://www.misterpoll.com/users/BuyNexium]Buy Nexium[/url]
发表时间：2009-1-10 17:58:32 [来自: 62.90.102.146]