smooth scroll 平滑滚动菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 smooth scroll 平滑滚动菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为smooth scroll 平滑滚动菜单，属于站长常用代码" />
<title>smooth scroll 平滑滚动菜单</title>
<style type="text/css">

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

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

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

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

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

a{
	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:hover{
	background:#CCC;
}
</style>
<script type="text/javascript" src="smooth.pack.js"></script>
</head>
<body >

<div class="header_link">

<h1 style="clear:both; padding:5px;">Smooth Scroll by Dezinerfolio</h1>

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

  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam  magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis  leo quis metus. Aenean non nulla quis diam cursus ultricies. Vestibulum  sagittis. In porttitor est quis elit laoreet blandit. Quisque  condimentum eros id nulla. Pellentesque dui nisl, pretium eget,  pellentesque nec, faucibus in, dui. Vestibulum quis mi. Maecenas turpis  enim, commodo eget, consectetuer ac, posuere in, nisl. Duis elit nunc,  molestie euismod, tempus at, condimentum at, nulla. </p>
  <p>Praesent eget lectus. Donec a nunc in dolor tincidunt rutrum.  Phasellus ornare. Vestibulum pulvinar. Morbi massa erat, ornare sed,  eleifend aliquet, imperdiet vitae, ligula. Ut nec diam. Phasellus dui  felis, dignissim vitae, scelerisque ac, aliquam et, diam. Morbi arcu  odio, mattis vel, euismod a, euismod ut, justo. Proin congue  consectetuer diam. Maecenas bibendum est in ipsum. In cursus nibh.  Proin sit amet nulla. Curabitur non lectus. Vivamus pharetra. Vivamus  nec sem. Etiam a ante et sem scelerisque adipiscing. Curabitur  sollicitudin. Nulla nec diam at odio fermentum hendrerit. </p>
  <p>Nunc quis ipsum. Sed suscipit bibendum ante. Phasellus facilisis  commodo sapien. Nam vitae nibh quis lacus cursus cursus. Maecenas ac  quam a libero adipiscing ultricies. Praesent at nisi ut lectus congue  ullamcorper. Proin mattis enim vitae magna fermentum facilisis. Proin  id lorem. Aenean ultrices nisi in enim. Aenean interdum, dolor id  convallis suscipit, risus est posuere nulla, sed tincidunt est nibh ut  enim. Praesent vel purus ac sapien iaculis placerat. Mauris nibh. In  feugiat felis. </p>
  <p>Sed velit elit, rutrum nec, mattis vitae, aliquam eu, pede. Nulla  orci nisl, tempor nec, tempor sed, congue rutrum, mauris. Nam sit amet  ipsum sed risus auctor ornare. Nullam eleifend libero sit amet diam.  Phasellus non eros. Nunc rutrum odio ut sapien. Phasellus ligula neque,  pulvinar non, venenatis id, pharetra eget, ante. Class aptent taciti  sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.  Proin tortor ligula, dictum a, aliquet ac, vehicula sed, purus. Nulla  egestas cursus erat. Sed sollicitudin. </p>
  <h2>Dezinerfolio</h2>
  
  <p>Praesent auctor, eros non varius dapibus, nibh risus molestie orci,  et tincidunt justo est sit amet odio. Integer tincidunt feugiat urna.  Sed rutrum laoreet risus. Donec vel eros. Mauris laoreet tincidunt  libero. Sed sit amet justo id nunc aliquam faucibus. Curabitur erat.  Vivamus non nunc. Nunc orci sem, porttitor ultrices, iaculis id,  placerat at, felis. Pellentesque ut mauris. Nunc libero arcu, bibendum  vitae, hendrerit sit amet, vehicula sed, erat. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Proin ligula purus, viverra nec, tincidunt eget, venenatis nec, nisi. </p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra,  per inceptos hymenaeos. Maecenas viverra. Curabitur cursus metus non  eros. Sed velit. In dapibus nisi sit amet nisl. Nulla aliquam, pede  eget fermentum volutpat, elit sapien ultrices sem, a eleifend justo  nisi eget purus. Praesent sit amet risus sagittis nisi aliquet  eleifend. Sed placerat nulla vel quam. Sed sagittis nibh in augue  vehicula aliquet. Suspendisse ac dui eu lacus viverra dictum. Curabitur  elementum, magna vitae commodo egestas, turpis lorem sollicitudin  lorem, ac auctor sapien lacus a orci. Quisque ornare est id sem.  Maecenas placerat, justo in suscipit adipiscing, ante metus ultricies  augue, ac sodales eros sapien luctus arcu. Pellentesque lobortis quam  non massa. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. </p>
  <p>Nunc ac orci. Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per inceptos hymenaeos. Nunc pharetra mauris et massa.  Praesent cursus fermentum libero. Pellentesque lobortis justo et nulla  dictum mollis. Morbi euismod nonummy lorem. Nulla at velit.  Pellentesque risus risus, euismod eu, dictum id, iaculis id, tellus.  Nullam interdum. Etiam pharetra mollis nisi. Pellentesque interdum,  nulla quis fringilla lacinia, leo felis suscipit sem, ac iaculis turpis  mi sit amet urna. Nulla mi ante, vehicula non, lacinia a, ornare at,  est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Praesent fringilla fermentum nulla. Nulla  facilisi. Suspendisse sit amet odio. Etiam ultricies. Pellentesque  nibh. Cras nisl. Nulla neque. </p>
</div>


<div class="middle_link">

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

  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam  magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis  leo quis metus. Aenean non nulla quis diam cursus ultricies. Vestibulum  sagittis. In porttitor est quis elit laoreet blandit. Quisque  condimentum eros id nulla. Pellentesque dui nisl, pretium eget,  pellentesque nec, faucibus in, dui. Vestibulum quis mi. Maecenas turpis  enim, commodo eget, consectetuer ac, posuere in, nisl. Duis elit nunc,  molestie euismod, tempus at, condimentum at, nulla. </p>
  <p>Praesent eget lectus. Donec a nunc in dolor tincidunt rutrum.  Phasellus ornare. Vestibulum pulvinar. Morbi massa erat, ornare sed,  eleifend aliquet, imperdiet vitae, ligula. Ut nec diam. Phasellus dui  felis, dignissim vitae, scelerisque ac, aliquam et, diam. Morbi arcu  odio, mattis vel, euismod a, euismod ut, justo. Proin congue  consectetuer diam. Maecenas bibendum est in ipsum. In cursus nibh.  Proin sit amet nulla. Curabitur non lectus. Vivamus pharetra. Vivamus  nec sem. Etiam a ante et sem scelerisque adipiscing. Curabitur  sollicitudin. Nulla nec diam at odio fermentum hendrerit. </p>
  <p>Nunc quis ipsum. Sed suscipit bibendum ante. Phasellus facilisis  commodo sapien. Nam vitae nibh quis lacus cursus cursus. Maecenas ac  quam a libero adipiscing ultricies. Praesent at nisi ut lectus congue  ullamcorper. Proin mattis enim vitae magna fermentum facilisis. Proin  id lorem. Aenean ultrices nisi in enim. Aenean interdum, dolor id  convallis suscipit, risus est posuere nulla, sed tincidunt est nibh ut  enim. Praesent vel purus ac sapien iaculis placerat. Mauris nibh. In  feugiat felis. </p>
  <p>Sed velit elit, rutrum nec, mattis vitae, aliquam eu, pede. Nulla  orci nisl, tempor nec, tempor sed, congue rutrum, mauris. Nam sit amet  ipsum sed risus auctor ornare. Nullam eleifend libero sit amet diam.  Phasellus non eros. Nunc rutrum odio ut sapien. Phasellus ligula neque,  pulvinar non, venenatis id, pharetra eget, ante. Class aptent taciti  sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.  Proin tortor ligula, dictum a, aliquet ac, vehicula sed, purus. Nulla  egestas cursus erat. Sed sollicitudin. </p>
    <h2>Dezinerfolio</h2>
  <p>Praesent auctor, eros non varius dapibus, nibh risus molestie orci,  et tincidunt justo est sit amet odio. Integer tincidunt feugiat urna.  Sed rutrum laoreet risus. Donec vel eros. Mauris laoreet tincidunt  libero. Sed sit amet justo id nunc aliquam faucibus. Curabitur erat.  Vivamus non nunc. Nunc orci sem, porttitor ultrices, iaculis id,  placerat at, felis. Pellentesque ut mauris. Nunc libero arcu, bibendum  vitae, hendrerit sit amet, vehicula sed, erat. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Proin ligula purus, viverra nec, tincidunt eget, venenatis nec, nisi. </p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra,  per inceptos hymenaeos. Maecenas viverra. Curabitur cursus metus non  eros. Sed velit. In dapibus nisi sit amet nisl. Nulla aliquam, pede  eget fermentum volutpat, elit sapien ultrices sem, a eleifend justo  nisi eget purus. Praesent sit amet risus sagittis nisi aliquet  eleifend. Sed placerat nulla vel quam. Sed sagittis nibh in augue  vehicula aliquet. Suspendisse ac dui eu lacus viverra dictum. Curabitur  elementum, magna vitae commodo egestas, turpis lorem sollicitudin  lorem, ac auctor sapien lacus a orci. Quisque ornare est id sem.  Maecenas placerat, justo in suscipit adipiscing, ante metus ultricies  augue, ac sodales eros sapien luctus arcu. Pellentesque lobortis quam  non massa. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. </p>
  <p>Nunc ac orci. Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per inceptos hymenaeos. Nunc pharetra mauris et massa.  Praesent cursus fermentum libero. Pellentesque lobortis justo et nulla  dictum mollis. Morbi euismod nonummy lorem. Nulla at velit.  Pellentesque risus risus, euismod eu, dictum id, iaculis id, tellus.  Nullam interdum. Etiam pharetra mollis nisi. Pellentesque interdum,  nulla quis fringilla lacinia, leo felis suscipit sem, ac iaculis turpis  mi sit amet urna. Nulla mi ante, vehicula non, lacinia a, ornare at,  est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Praesent fringilla fermentum nulla. Nulla  facilisi. Suspendisse sit amet odio. Etiam ultricies. Pellentesque  nibh. Cras nisl. Nulla neque. </p>
</div>

<div class="footer_link">

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

  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam  magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis  leo quis metus. Aenean non nulla quis diam cursus ultricies. Vestibulum  sagittis. In porttitor est quis elit laoreet blandit. Quisque  condimentum eros id nulla. Pellentesque dui nisl, pretium eget,  pellentesque nec, faucibus in, dui. Vestibulum quis mi. Maecenas turpis  enim, commodo eget, consectetuer ac, posuere in, nisl. Duis elit nunc,  molestie euismod, tempus at, condimentum at, nulla. </p>
  <p>Praesent eget lectus. Donec a nunc in dolor tincidunt rutrum.  Phasellus ornare. Vestibulum pulvinar. Morbi massa erat, ornare sed,  eleifend aliquet, imperdiet vitae, ligula. Ut nec diam. Phasellus dui  felis, dignissim vitae, scelerisque ac, aliquam et, diam. Morbi arcu  odio, mattis vel, euismod a, euismod ut, justo. Proin congue  consectetuer diam. Maecenas bibendum est in ipsum. In cursus nibh.  Proin sit amet nulla. Curabitur non lectus. Vivamus pharetra. Vivamus  nec sem. Etiam a ante et sem scelerisque adipiscing. Curabitur  sollicitudin. Nulla nec diam at odio fermentum hendrerit. </p>
  <p>Nunc quis ipsum. Sed suscipit bibendum ante. Phasellus facilisis  commodo sapien. Nam vitae nibh quis lacus cursus cursus. Maecenas ac  quam a libero adipiscing ultricies. Praesent at nisi ut lectus congue  ullamcorper. Proin mattis enim vitae magna fermentum facilisis. Proin  id lorem. Aenean ultrices nisi in enim. Aenean interdum, dolor id  convallis suscipit, risus est posuere nulla, sed tincidunt est nibh ut  enim. Praesent vel purus ac sapien iaculis placerat. Mauris nibh. In  feugiat felis. </p>
  <p>Sed velit elit, rutrum nec, mattis vitae, aliquam eu, pede. Nulla  orci nisl, tempor nec, tempor sed, congue rutrum, mauris. Nam sit amet  ipsum sed risus auctor ornare. Nullam eleifend libero sit amet diam.  Phasellus non eros. Nunc rutrum odio ut sapien. Phasellus ligula neque,  pulvinar non, venenatis id, pharetra eget, ante. Class aptent taciti  sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.  Proin tortor ligula, dictum a, aliquet ac, vehicula sed, purus. Nulla  egestas cursus erat. Sed sollicitudin. </p>
    <h2>Dezinerfolio</h2>
  <p>Praesent auctor, eros non varius dapibus, nibh risus molestie orci,  et tincidunt justo est sit amet odio. Integer tincidunt feugiat urna.  Sed rutrum laoreet risus. Donec vel eros. Mauris laoreet tincidunt  libero. Sed sit amet justo id nunc aliquam faucibus. Curabitur erat.  Vivamus non nunc. Nunc orci sem, porttitor ultrices, iaculis id,  placerat at, felis. Pellentesque ut mauris. Nunc libero arcu, bibendum  vitae, hendrerit sit amet, vehicula sed, erat. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Proin ligula purus, viverra nec, tincidunt eget, venenatis nec, nisi. </p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra,  per inceptos hymenaeos. Maecenas viverra. Curabitur cursus metus non  eros. Sed velit. In dapibus nisi sit amet nisl. Nulla aliquam, pede  eget fermentum volutpat, elit sapien ultrices sem, a eleifend justo  nisi eget purus. Praesent sit amet risus sagittis nisi aliquet  eleifend. Sed placerat nulla vel quam. Sed sagittis nibh in augue  vehicula aliquet. Suspendisse ac dui eu lacus viverra dictum. Curabitur  elementum, magna vitae commodo egestas, turpis lorem sollicitudin  lorem, ac auctor sapien lacus a orci. Quisque ornare est id sem.  Maecenas placerat, justo in suscipit adipiscing, ante metus ultricies  augue, ac sodales eros sapien luctus arcu. Pellentesque lobortis quam  non massa. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. </p>
  <p>Nunc ac orci. Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per inceptos hymenaeos. Nunc pharetra mauris et massa.  Praesent cursus fermentum libero. Pellentesque lobortis justo et nulla  dictum mollis. Morbi euismod nonummy lorem. Nulla at velit.  Pellentesque risus risus, euismod eu, dictum id, iaculis id, tellus.  Nullam interdum. Etiam pharetra mollis nisi. Pellentesque interdum,  nulla quis fringilla lacinia, leo felis suscipit sem, ac iaculis turpis  mi sit amet urna. Nulla mi ante, vehicula non, lacinia a, ornare at,  est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Praesent fringilla fermentum nulla. Nulla  facilisi. Suspendisse sit amet odio. Etiam ultricies. Pellentesque  nibh. Cras nisl. Nulla neque. </p>
</div>
</body>
</html>

JS代码(smooth-src-comments.js):

/*-------------------------------------------------------------------------- * Smooth Scroller Script,version 1.0.1 * (c) 2007 Dezinerfolio Inc. <midart@gmail.com> * * For details,please check the website:http://dezinerfolio.com/ */
*--------------------------------------------------------------------------*/
Scroller ={
	// control the speed of the scroller.// dont change it here directly,please use Scroller.speed=50;
	speed:10,// returns the Y position of the divgy:function (d){
	gy = d.offsetTopif (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTopreturn gy}
,// returns the current scroll positionscrollTop: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}
,// attach an event for an element// (element,type,function)add:function(event,body,d){
	if (event.addEventListener) return event.addEventListener(body,d,false) if (event.attachEvent) return event.attachEvent('on'+body,d)}
,// kill an event of an elementend:function(e){
	if (window.event){
	window.event.cancelBubble = truewindow.event.returnValue = falsereturn;
}
if (e.preventDefault && e.stopPropagation){
	e.preventDefault() e.stopPropagation()}
}
,// move the scroll bar to the particular div.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)elsea+=Math.ceil((d-a-(h-d))/Scroller.speed)elsea = a+(d-a)/Scroller.speed;
	window.scrollTo(0,a)if(a==d || Scroller.offsetTop==a)clearInterval(Scroller.interval)Scroller.offsetTop=a}
,// initializer that adds the renderer to the onload function of the windowinit:function(){
	Scroller.add(window,'load',Scroller.render)}
,// this method extracts all the anchors and validates then as # and attaches the events.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);
}
}
}
}
}
}
}
// invoke the initializer of the scrollerScroller.init();
	/*------------------------------------------------------------ *END OF CODE/*-----------------------------------------------------------*/

附件:下载该文件资源,减少时间成本(增值服务)