js返回浏览器的顶部

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Javascript 回到顶部效果</title><style type="text/css">#btn {width: 80px;height: 40px;position: fixed;display: none;right: 0px;bottom: 30px;}           .box {width: 1190px;margin: 0 auto;}.box ul li {height: 200px;}</style></head><body><div class="box"><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div><a href="javascript:;" id="btn" title="回到顶部">返回顶部</a><script type="text/javascript">window.onload = function() {var obtn = document.getElementById('btn');var timer = null;var isTop = true;//获取页面的可视窗口高度var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//滚动条滚动时触发window.onscroll = function() {//在滚动的时候增加判断var osTop = document.documentElement.scrollTop || document.body.scrollTop; //特别注意这句，忘了的话很容易出错//当距离顶部100px时，出现返回顶部按钮//或者当页面的可视窗口高度clientHeight小于滚动条的高度时，出现返回顶部按钮if(osTop >= 100) {obtn.style.display = 'block';} else {obtn.style.display = 'none';}if(!isTop) {clearInterval(timer);}isTop = false;};btn.onclick = function() {//设置定时器timer = setInterval(function() {//获取滚动条距离顶部的高度var osTop = document.documentElement.scrollTop || document.body.scrollTop; //同时兼容了ie和Chrome浏览器//减小的速度var isSpeed = Math.floor(-osTop / 6);document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;isTop = true;//判断，然后清除定时器if(osTop == 0) {clearInterval(timer);}}, 30);};}</script>
</body>
</html>

js返回浏览器的顶部相关推荐

js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
html匀速回到顶部,原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
兼容IE，chrome 等所有浏览器回到顶部代码
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...
js获取浏览器滚动条距离顶端的距离
js获取浏览器滚动条距离顶端的距离一.jQuery获取的相关方法 jquery 获取滚动条高度获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : ...
基于JS实现回到页面顶部的五种写法(从实现到增强)
为什么80%的码农都做不了架构师?>>> 写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返 ...
如何获得当前屏幕顶端距离整个页面最上端的距离(即js获取浏览器滚动条距离顶端的距离)
最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存: 一.jQuery获取的相关方法 Js代码 jquery 获取滚动条高度 ...
使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况详情请看主页:modernizr主页 1. modernizr 是什么? modernize 是一个js库----一个用于检测当 ...
modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 1.modernizr 是什么? modernize 是一个js库----一个用于检测当前浏览器对html5&css3 ...
html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
js判断wifi_使用JS在浏览器中判断当前网络连接状态的几种方法
使用JS在浏览器中判断当前网络状态的几种方法如下: 1. navigator.onLine 2. ajax请求 3. 获取网络资源 4. bind() 1. navigator.onLine 通过na ...

js返回浏览器的顶部

js返回浏览器的顶部相关推荐

最新文章

热门文章