JavaScript实现回到顶部
HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面。
demo:
<a href="javascript:;" id="btn" title="回到顶部"></a>
其css代码为:
#btn{
display: none;
position: fixed;
left: 90%;
bottom: 40px;
height:60px;
width: 60px;
background: url(img/22.ico) no-repeat left top;
background-size:100% auto;
border: solid 1px red;
border-radius: 5px;
}
补充几句话:
window.onload = function(){
//获取相关
var mybtn = document.getElementById("btn");
var Time1 = null;
var isTop = true; mybtn.onclick = function(){
//设置定时器
Time1 = setInterval(function(){
var osTop = document.body.scrollTop||document.documentElement.scrollTop;
//ceil向上取整,floor向下取整
var speed = Math.ceil(osTop/2);
//做一个变换速度的回到顶部效果
document.body.scrollTop = document.documentElement.scrollTop = osTop - speed;
if(osTop <= 0){
//清除定时器
clearInterval(Time1);
}
isTop = true ;
},100)
} //页面滚动自动触发:
window.onscroll = function(){
//获取页面可视区高度和滚动高度
var osTop = document.body.scrollTop||document.documentElement.scrollTop;
//这两个获取滚动的方法可以兼容多种浏览器
var clientHeight = document.documentElement.clientHeight;
//对回到顶部的隐藏和显示,在css中一开始可以设置为隐藏
if (osTop>clientHeight) {
mybtn.style.display = "block"
}
else{
mybtn.style.display = "none"
}
if (!isTop) {
clearInterval(Time1);
}
isTop = false;
}
}
另外补充:
1、各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;
2、获取scrollTop值
完美的获取scrollTop 赋值短语 :
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通过这句赋值就能在任何情况下获得scrollTop 值。
最后说明:
本人学习来自百度搜索,祝大家利用好网络搜索。
JavaScript实现回到顶部的更多相关文章
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- 原生javascript实现回到顶部平滑滚动
function rt() { var d = document, dd = document.documentElement, db = document.body, top = dd.scroll ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯javascript 回到 顶部 实例
很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人, ...
- JavaScript实现网页回到顶部效果
在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...
- javascript 回到顶部效果的实现
demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...
- javascript 回到顶部 动画效果
上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...
随机推荐
- python还不能作为主要编程语言的原因:
1.不太熟悉,容易犯新手错误,2.调试方法不同3.写了一个函数,是否语法正确,不能知道,只有具体调用它的时候才知道4.编辑器太业余,没有输入联想功能5.要查找一个函数或变量在哪里定义的,只能通过搜索的 ...
- cat ,more, Less区别
使用cat more less都可以查看文本内容,但是它们三者有什么区别呢?more和less的功能完全重复吗?以下是我个人的总结,欢迎大家一起来分享 cat 连续显示.查看文件内容mo ...
- json-lib反序列化时(JSONObject.toBean),时间类型为空的处理
需求: 在我们的项目里希望JsonString传入日期类型值为空时,JSONObject.toBean时可以将Java对象的该日期属性设为null. 解决过程: json-lib反序列化Json字符串 ...
- remove all event handlers from a control
The sample code below will remove all Click events from button1 public partial class Form1 : Form { ...
- UVA 540 Team Queue
思路:使用优先队列,按队伍出现的时刻和自身出现的时刻定义优先级,同时记录此时刻队列里是否有自己队伍的人,一开始没注意,wa了两发. #include<map> #include<qu ...
- JZ2440开发笔记(2)——minicom的安装和配置使用【转】
一.安装配置minicom 1.安装minicom lingd@ubuntu:~$ sudo apt-get install minicom 2.配置minicom lingd@ubuntu:~$ s ...
- linux内核申请内存函数
kmap函数: 把某块高端内存映射到页表,然后返回给用户一个填好vitual字段的page结构 建立永久地址映射,不是简单的返回virtual字段的pageioremap: 驱动程序 ...
- 【Java基础】Java中的多态
什么是多态 多态是一个对象的多种实现,是建立在继承的基础上的,即对象“人”,有老师和学生不同的实现,其实总结起来就是允许将子类类型的指针赋值给父类类型的指针. 多态的发生条件 多态发生的前提是:1. ...
- Codeforces10D–LCIS(区间DP)
题目大意 给定两个序列,要求你求出最长公共上升子序列 题解 LIS和LCS的合体,YY好久没YY出方程,看了网友的题解,主要是参考aikilis的,直接搬过来好了 经典的动态规划优化. 用opt[i] ...
- iOS设备的硬件适配 (关于armv6, armv7, armv7s ) <转>
<转> http://blog.csdn.net/smking/article/details/8148702 1.OpenGL ES版本支持 iPhone:iPhone 3G以下(包 ...