超强动感返回顶部按钮

作者：佳明妈来源：懒人建站 2009-12-24 人气：

超强动感返回顶部按钮JS代码，你可以把他做为滚屏功能来使用。比如向下滚屏、向上滚屏。你可以对 input 进行样式的控制用背景图片替换丑陋的按钮。

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>超强动感返回顶部按钮_懒人建站 http://www.51xuediannao.com</title>
	<script type="text/javascript">
		function scrollToBottom() {
			var i= 0,max=document.body.scrollHeight,
				t=0;
			(function test(){
				t = setTimeout(function(){
					i+=10;
					window.scroll(0,i);
					if(i<max){
						test();
					}else{
						clearTimeout(t);
					}
				},0);
			})();
		}

<div class="hdo right" style="height: 2000px;">
	<dl class="hdo list_dl list_dl_r">
		<dt class="line_t"><b>SEO优化</b><a href="http://www.51xuediannao.com/plus/list.php?tid=6" class="more">更多 >></a></dt>
		<dd class="line_b">
			<ul>
				<li><a href="http://www.51xuediannao.com/SEO/20091124/seoyinbao.html" title="SEO案例详解SEO引爆点">SEO案例详解SEO引爆点</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20091111/Description.html" title="怎么写网页描述Description符合SEO优化">怎么写网页描述Description符合SEO优化</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20091014/116.html" title="SEO优化中标题的学问">SEO优化中标题的学问</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20091010/69.html" title="如何逃离谷歌沙盒">如何逃离谷歌沙盒</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20091010/68.html" title="构造利于SEO的HTML标准结构">构造利于SEO的HTML标准结构</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20091010/67.html" title="55个技巧让你迅速上手搜索引擎优化">55个技巧让你迅速上手搜索引擎优化</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20091010/66.html" title="如何建立高质量的链接">如何建立高质量的链接</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20090829/13.html" title="国美电器网站用户体验优化建议草稿">国美电器网站用户体验优化建议草稿</a></li>
				<li><a href="http://www.51xuediannao.com/SEO/20090829/7.html" title="网页内容给用户看和给搜索引擎看的不同">网页内容给用户看和给搜索引擎看的不同</a></li>

</ul>
		</dd>
	</dl>

<dl class="hdo list_dl list_dl_r">
		<dt class="line_t"><b>建站技巧</b><a href="http://www.51xuediannao.com/jiqiao/" class="more">更多 >></a></dt>
		<dd class="line_b">
			<ul>
				<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091209/JW Players.html" title="JW FLV Media Player(JW Players)简体中文文档">JW FLV Media Player(JW Players)简体中文文档</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091208/jsdongtaicss.html" title="JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式">JS判断浏览器类型和屏幕分辨率来调用不同的CS</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/cms/20091208/dedecmstag.html" title="织梦(dedecms)的tags字数限制的修改">织梦(dedecms)的tags字数限制的修改</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091202/web2.0nav.html" title="流行的欧美web2.0风格导航菜单集合">流行的欧美web2.0风格导航菜单集合</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/css/20091126/cssanli.html" title="页面应用半透明PNG背景IE7下浏览会变慢的解决">页面应用半透明PNG背景IE7下浏览会变慢的解决</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091123/chakanyuanma2.html" title="JS清空网页代码防止查看源代码是个骗局">JS清空网页代码防止查看源代码是个骗局</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/css/20091121/cssjuzhong2.html" title="HTML+CSS垂直居中其实很简单">HTML+CSS垂直居中其实很简单</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/css/20091121/cssjuzhong.html" title="HTML+CSS水平居中其实很简单">HTML+CSS水平居中其实很简单</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091121/dingwei.html" title="网站定位需要实事求是">网站定位需要实事求是</a></li>
				<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091111/flashxuxiankuang.html" title="去掉IE中鼠标滑过flash文件四周的虚线框">去掉IE中鼠标滑过flash文件四周的虚线框</a></li>

</ul>
		</dd>
	</dl>

<dl class="hdo list_dl">
		<dt class="line_t"><b>CSS导航菜单</b><a href="http://www.51xuediannao.com/JS/nav/" class="more">更多 >></a></dt>
		<dd class="line_b">
			<ul>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091212/cssnav07.html"  title="三级导航,水平导航,横向导航">纯div+css水平三级导航菜单</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091212/cssnav05.html"  title="纯div+css水平二级导航菜单子菜单向上弹出">纯div+css水平三级导航菜单子菜单向上弹出</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091209/254.html"  title="竖向折叠二级导航JS代码（可防刷新ul/li结构）">竖向折叠二级导航JS代码（可防刷新ul/li结构）</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091209/navcss03.html"  title="纯div+css的竖向三级导航菜单代码">纯div+css的竖向三级导航菜单代码</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091209/cssnav02.html"  title="">纯div+css的紫色三级导航菜单代码</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091209/cssnav01.html"  title="纯div+css的黄色二级导航菜单代码">纯div+css的黄色二级导航菜单代码</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091208/jsflashnav.html"  title="JS仿Flash向上翻动效果竖向导航代码">JS仿Flash向上翻动效果竖向导航代码</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091208/flashnav02.html"  title="粉红色flash导航带fla源文件">粉红色flash导航带fla源文件</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091208/flashnav.html"  title="XML配置的flash图片导航带fla源文件">XML配置的flash图片导航带fla源文件</a></li>
				<li><a href="http://www.51xuediannao.com/JS/nav/20091207/jquery4nav.html"  title="Jquery四种苹果风格导航菜单(横向/竖向/向上/向下)">Jquery四种苹果风格导航菜单(横向/竖向/向上/向下</a></li>

</ul>
		</dd>
	</dl><dl class="hdo list_dl">
	<dt class="line_t"><b>FLASH焦点图</b><a href="http://www.51xuediannao.com/JS/Slide/" class="more">更多 >></a></dt>
	<dd class="line_b">
		<ul>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091222/jquerySlide.html"  title="基于jquery的weiphone.com首页焦点幻灯片">基于jquery的weiphone.com首页焦点幻灯片</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091209/xmlswf01.html"  title="XML+Flash顶部Banner幻灯焦点图">XML+Flash顶部Banner幻灯焦点图</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091209/JQuerychajian.html"  title="JQuery图片平滑滚动插件easyslider1.5">JQuery图片平滑滚动插件easyslider1.5</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091208/sanweibanner.html"  title="三维旋转效果幻灯banner焦点图点击滚动">三维旋转效果幻灯banner焦点图点击滚动</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091201/sanweiliti.html"  title="三维立体flash焦点幻灯片(Flash+XML)">三维立体flash焦点幻灯片(Flash+XML)</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091128/zuoyouqiehuan.html"  title="横向平滑分组切换由鼠标点击控制(HTML+CSS+JS)">横向平滑分组切换由鼠标点击控制(HTML+CSS+JS)</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091126/gmjiaodiantu.html"  title="国美电器商城首页焦点幻灯片(HTML+CSS+JS)">国美电器商城首页焦点幻灯片(HTML+CSS+JS)</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091125/wlbanner.html"  title="Flash+xml的未来广告公司焦点幻灯banner">Flash+xml的未来广告公司焦点幻灯banner</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091105/Windows banner.html"  title="微软中国MSN主页焦点幻灯片banner">微软中国MSN主页焦点幻灯片banner</a></li>
			<li><a href="http://www.51xuediannao.com/JS/Slide/20091103/yahoo.html"  title="中国雅虎新首页焦点幻灯片JS+CSS+HTML">中国雅虎新首页焦点幻灯片JS+CSS+HTML</a></li>

</ul>
	</dd>
</dl><dl class="hdo list_dl">
	<dt class="line_t"><b>网页特效JS</b><a href="http://www.51xuediannao.com/JS/texiao/" class="more">更多 >></a></dt>
	<dd class="line_b">
		<ul>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091224/gehanghuanse.html"  title="JS方法隔行换色代码">JS方法隔行换色代码</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091223/xuehua.html"  title="圣诞节页面雪花特效JS代码">圣诞节页面雪花特效JS代码</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091223/jquerysiye.html"  title="基于jquery的右上角撕页效果PagePeelv1.0">基于jquery的右上角撕页效果PagePeelv1.0</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091222/weiruantab.html"  title="微软首页竖向TAB滑动门">微软首页竖向TAB滑动门</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091222/jqueryhdm.html"  title="基于jquery滑动门通过class=hover调用">基于jquery滑动门通过class=hover调用</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091222/JSzihao2.html"  title="用户控制页面字号逐级放大缩小JS代码">用户控制页面字号逐级放大缩小JS代码</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091222/JSzihao.html"  title="最简洁的用户控制改变字体大小JS代码">最简洁的用户控制改变字体大小JS代码</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091222/copy js.html"  title="点击按钮复制网址完美无错版JS代码">点击按钮复制网址完美无错版JS代码</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091222/267.html"  title="等待一定的时间出现下载链接JS代码">等待一定的时间出现下载链接JS代码</a></li>
			<li><a href="http://www.51xuediannao.com/JS/texiao/20091216/fangdajubu.html"  title="鼠标滑过图片实现图片的局部放大JS特效代码">鼠标滑过图片实现图片的局部放大JS特效代码</a></li>

</ul>
	</dd>
</dl>
	<dl class="hdo list_dl">
		<dt class="line_t"><b>JS广告代码</b><a href="http://www.51xuediannao.com/JS/AD/" class="more">更多 >></a></dt>
		<dd class="line_b">
			<ul>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091215/lianjietexiao1.html"  title="点击链接同时打开两个页面链接的JS代码">点击链接同时打开两个页面链接的JS代码</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091212/tanchuang01.html"  title="点击任意链接弹窗24小时只弹一次">点击任意链接弹窗24小时只弹一次</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091205/baidufudong.html"  title="百度推广右下角提交留言的浮动层JS代码">百度推广右下角提交留言的浮动层JS代码</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091205/youxiatv.html"  title="JS右下角浮动视频广告代码可关闭可最小化">JS右下角浮动视频广告代码可关闭可最小化</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091205/sinayouxia.html"  title="类似新浪博客右下角弹出广告代码可最小化可关闭">类似新浪博客右下角弹出广告代码可最小化可关</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091202/youxiajiao002.html"  title="右下角弹出浮动层广告代码可自动关闭">右下角弹出浮动层广告代码可自动关闭</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091201/tanchuswf.html"  title="能播放flash文件的弹出浮动窗口广告代码(有重播按钮)">能播放flash文件的弹出浮动窗口广告代码(有重播</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091201/yxtc2.html"  title="类似阿里妈妈右下角弹出浮动广告代码可关闭可最小化(HTML+CSS+JS)">类似阿里妈妈右下角弹出广告代码可关闭可最小</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091201/yxtc1.html"  title="右下角弹出浮动广告代码可关闭可最小化(HTML+CSS+JS)">右下角弹出浮动广告代码可关闭可最小化(HTML+C</a></li>
				<li><a href="http://www.51xuediannao.com/JS/AD/20091111/gonggao.html"  title="JS+DIV+CSS实现以打字效果逐条显示的公告栏">JS+DIV+CSS实现以打字效果逐条显示的公告栏</a></li>

</ul>
		</dd>
	</dl>

</div>
<input type=button value="返回顶部" onClick="scrollToTop()" name="button">
<br><br>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
	<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
	<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br/>
	<span>我们为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLASH焦点图片，国外网页设计欣赏与模板和CSS技巧。；</span>
	<span>懒人建站只收录实用和能提高用户体验的代码</span>
	<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</body>
</html>

超强动感返回顶部按钮JS代码，JS代码量很少，你可以把他做为滚屏功能来使用。比如向下滚屏、向上滚屏。

修改说明：

你可以对 input 进行样式的控制用背景图片替换丑陋的按钮。

↓ 查看全文

本文链接：超强动感返回顶部按钮https://www.51xuediannao.com/js/texiao/fanhui.html

超强动感返回顶部按钮由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

超强动感返回顶部按钮

超强动感返回顶部按钮-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户

超强动感返回顶部按钮

超强动感返回顶部按钮-相关文章

超强动感返回顶部按钮-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户