繁体中文
设为首页
加入收藏
首页
网页制作
脚本专栏
网络编程
数据库
源码下载
软件下载
脚本下载
平面设计
媒体动画
网站技巧
实用技巧
免费资源
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容 TOP页顶
点选TOP后并不是直接跳到页顶的，而是滚动上去
发布：dxy 字体：[
增加
减小
] 类型：转载
滚动至页顶，比以前的直接跳到页顶效果好很多，正的很不错
demo中的p中的script改大或改小看看。。。移动到top的时间始终是一定的，你也可以设置一个阀值，在页面高度到达这个阀值之前，移动的总时间是多少，当页面高度超过这个数时，移动的总时间反而以一定比例减小，自己试试看吧...
点击运行可以看到效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>脚本之家_回到页顶效果代码</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Author" content="Sheneyan" /> <script> function s2top(){ var a = document.getElementsByTagName('a'); var l = a.length; for (var i = 0 ; i < l ; i ++){ var ai = a[i]; if (/#header$/.test(ai.href)){ ai.onclick = function(){ var o = this; var ot = o.offsetTop; for (var t = 0 ; t < 20 ; t ++){ setTimeout("scrollBy(0,-" + parseInt(ot / 20) + ")",t * 50 + 1); } return false; } } } } </script> <body onload="s2top()"> </body> <script> for (var i = 0 ; i < 1000 ; i ++) document.write(i+" "); </script> <a href="#header">go to 头</a> </body>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
TOP
页顶
滚动实现
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
Javascript拖拽&拖放系列文章3之细说事件对象
下一篇文章：
js实例入门(简单展开或关闭)
·在百度中搜索关于“
点选TOP后并不是直接跳到页顶的，而是滚动上去
相关内容
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
用Javascript实现UTF8编码转换成gb2312编
Javascript的IE和Firefox兼容性汇编
用javascript实现计算两个日期的间隔天数
无语，javascript居然支持中文(unicode)编
JS类中定义原型方法的两种实现的区别
JTrackBar水平拖动效果
取键盘键位ASCII码的网页
可以支持多中格式的JS键盘
greenbrower用到的function.js代码集合
js获取url参数的使用扩展实例
最 近 更 新
很多人都是用下面的js刷新站IP和PV
javascript网页关键字高亮代码
模仿IE自动完成功能
最简短的拖动对象代码实例演示
javascript得到XML某节点的子节点个数的脚
动态加载js的几种方法
用javascript动态调整iframe高度的方法
javascript结合Cookies实现浏览记录历史
JavaScript 给汉字排序实例代码
认识延迟时间为0的setTimeout
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
JavaScript实现Sleep函数的代码
彻底搞懂JS无缝滚动代码
支持IE和FF的div＋css选项卡
Unicode 编码转换器
js实现的点击超链显示隐藏层
文章评论
共有 位脚本之家网友发表了评论我来说两句