javascript实现网页返回顶部功能
2024-10-20 06:37:20
在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的。
有些网站使用锚链接来实现页面内容的跳转,但这种效果的用户体验比较差,因为是突然跳转,眼睛来不及反应。
这里我们使用js实现页面返回顶部。为了使滚动条渐进地上移,我们需要使用定时器。同时通过不断改变滚动条顶部的高度来控制页面的变化。
下面为具体代码实现
index.html:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="box">
<img src="tb_bg.jpg"/>
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>
style.css:
.box {
width:1190px;
/*图片居中*/
magin:0 auto;
} #btn {
width:40px;
height:40px;
/*设置固定位置*/
position:fixed;
left:50%;
margin-left:610px;
bottom:30px;
background:url(top_bg.png) no-repeat left top;
} /*鼠标浮动切换图片效果*/
#btn:hover {
background:url(top_bg.png) no-repeat 0 -40px;
}
script.js:
/**
* Created by lujie on 2016/11/15.
*/ //页面加载完毕后触发
window.onload = function () {
var obtn = document.getElementById('btn');
var timer = null;
var isTop = true; //滚动条滚动时触发
window.onscroll = function () {
if(!isTop){
clearInterval(timer);
}
isTop = false;
}
obtn.onclick = function () {
//设置定时器
timer = setInterval(function () {
//滚动条距离顶部的高度
var osTop = document.documentElement.scrollTop||document.body.scrollTop;
var isSpeed = Math.ceil(osTop/6);
document.documentElement.scrollTop = document.body.scrollTop = osTop-isSpeed; isTop = true;
if(osTop == 0){
clearInterval(timer);
}
},30);
}
}
注:IE浏览器滚动条顶部的高度:document.documentElement.scrollTop
谷歌浏览器滚动条顶部的高度:document.body.scrollTop
最新文章
- Markdown编辑器测试
- 记录Castle ActiveRecord访问Sqlite的配置
- HTML5游戏开发引擎,初识CreateJS
- DOM对象与jquery对象的区别
- 结队开发项目——七巧板NABC需求分析
- android LayoutInflater.inflate()的参数介绍
- 典型的js页面
- 用PHP Session和Javascript实现文件上传进度条,处理进度条
- Docker在云环境中的应用实践初探:优势、局限性与效能评测
- 让EF支持sql语句
- JS中获取页面单选框radio和复选框checkbox中当前选中的值
- IOS之按钮控件--Button全解析及使用 分类: ios技术 2015-01-17 17:09 169人阅读 评论(0) 收藏
- MyBatis 使用Generator自动生成Model , Dao, mapper
- Spring AOP高级——源码实现(2)Spring AOP中通知器(Advisor)与切面(Aspect)
- [Swift]LeetCode539. 最小时间差 | Minimum Time Difference
- 下拉框选择blur与click冲突问题
- Redis 5种数据结构
- (文件操作)Android相关的File文件操作
- zabbix3.0.4使用shell脚本和zabbix自带模板两种方法添加对指定进程和端口的监控
- c++ static笔记
热门文章
- libevent显式调用事件处理
- js中迭代元素特性与DOM中的DocumentFragment类型 笔记
- Xshell出现要继续使用此程序必须应用到最新的更新或使用新版本
- systemtap get var of the tracepoing
- Luogu3960 NOIP2017列队(splay/线段树)
- [bzoj2901]矩阵求和
- 你对javascript的原生操作或者工具了解多少呢?
- git使用笔记(六)github
- Backup and Restore MySQL Database using mysqlhotcopy
- [hdu 3652]数位dp解决数的倍数问题