教程集 > jQuery > jquery 教程 > 正文带缓动效果返回顶部JS特效代码

带缓动效果返回顶部JS特效代码

发布时间：2023-12-19 编辑：jiaochengji.com

教程集为您提供带缓动效果返回顶部JS特效代码等资源，欢迎您收藏本站，我们将为您提供最新的带缓动效果返回顶部JS特效代码资源

我们经常会看到很多网站都有各种返回顶部效果，现在利用jquery几乎几句代码即可实现了，同时也有缓动效果，但有时我不想使用jquery而直接使用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=gb2312">    <style type="text/css">  body{position:relative;margin:0;padding:55px 0 0 0;}  #demo_menu{position:absolute;top:0;left:0;width:100%;height:50px;line-height:50px;background:url(/statics/images/my/menu_bg.png) repeat-x;z-index:800;font-size:14px;text-align:center;color:#999;line-height:180%;border-bottom:1px solid #8A961C;}  #demo_menu .top_menu{width:1080px;margin:0 auto;color:#000;font-size:12px;overflow:hidden;z-index:1000;}  #demo_menu .top_menu strong{width:195px;display:block;height:50px;float:left;background:url(/statics/images/my/logo.png) no-repeat 0 8px;}  #demo_menu .top_left{float:left;width:550px;height:50px;line-height:50px;z-index:9999;overflow:hidden;}  #demo_menu .top_left ul{width:550px;float:right;overflow:hidden;list-style: none;margin:0;padding:0;}  #demo_menu .top_left li{float:left;margin:0 15px 0 0;padding:0;text-align:center;}  #demo_menu .top_left li a,#demo_menu .top_left li a:visited{font-size:14px;font-weight:bold;color:#333;text-decoration:none;width:60px;display:block;height:50px;line-height:50px;}  #demo_menu .top_left li a:hover,#demo_menu .top_left li a:hover span{cursor:pointer;color:#fff;text-decoration:none;}  #demo_menu .top_left a,#demo_menu .top_left a:visited{font-size:12px;white-space:nowrap;color:#fff;font-family:"宋体", "Times New Roman", Times, serif;line-height:140%;}  #demo_menu .top_left a:hover{color:#000;font-family:"宋体", "Times New Roman", Times, serif;}  #demo_menu .top_right{float:right;width:320px;padding:8px 0 0 0;z-index:1000;}  #bdshare{margin:-5px 0 0 0;}    .page {width:100%; height:500px; text-align: center; margin-bottom:10px; line-height:500px; font-size:80px; font-family:Arial; text-shadow:3px 3px 10px #fff;}  #rtt {width:50px; height:50px; background:url('../images/rrt.png'); background-size:cover; position:fixed; right:50px; bottom:50px; border-radius: 5px; z-index:1000; display:none;}  h1{text-align:center;}  </style><title>返回顶部JS特效代码 带缓动效果  </title>    <script type="text/javascript" >        function myEvent(obj,ev,fn){  	if(obj.attachEvent){  		obj.attachEvent('on' ev,fn);  	}else{  		obj.addEventListener(ev,fn,false);  	}  }  myEvent(window,'load',function(){  	var oRTT=document.getElementById('rtt');  	var pH=document.documentElement.clientHeight;  	var timer=null;  	var scrollTop;  	window.onscroll=function(){  		scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  		if(scrollTop>=pH){  			oRTT.style.display='block';  		}else{  			oRTT.style.display='none';  		}  		return scrollTop;  	};  	oRTT.onclick=function(){  		clearInterval(timer);  		timer=setInterval(function(){  			var now=scrollTop;  			var speed=(0-now)/10;  			speed=speed>0?Math.ceil(speed):Math.floor(speed);  			if(scrollTop==0){  				clearInterval(timer);  			}  			document.documentElement.scrollTop=scrollTop speed;  			document.body.scrollTop=scrollTop speed;  		}, 30);  	}  });</script>  </head>  <body>  <div id='rtt'>返回顶部，这里可换成图片</div>  <h1>带缓动效果的返回顶部JS特效代码</h1>  <div class='page' style='background:#ccc;'>Page 1</div>  <div class='page' style='background:#999;'>Page 2</div>  <div class='page' style='background:#ccc;'>Page 3</div>  <div class='page' style='background:#999;'>Page 4</div>  <div class='page' style='background:#ccc;'>Page 5</div>  <div class='page' style='background:#999;'>Page 6</div>            </body>  </html></td>  	  </tr>  	</table>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
网页中返回顶部代码(多种方法)另附注释说明
 带缓动效果返回顶部JS特效代码
 带缓冲效果的“返回顶部”按钮js代码
 网站顶部带缓冲打开和关闭功能的横栏提示层js代码
 仿新浪微博返回顶部的jquery实现代码
 javascript 回到顶部示例
 js+JQuery返回顶部功能如何实现
 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
 javascript实现返回网页顶部效果代码
 CSS3 Animations创建返回顶部的平滑动画

上一篇：js实现checkbox记住密码提示框效果下一篇：状态栏文字从中间扩散出现

[关闭]

带缓动效果返回顶部JS特效代码

最近更新

浏览排行