js简单的点击返回顶部效果实现方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js简单的点击返回顶部效果实现方法。分享给大家供大家参考。具体分析如下:

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个“返回顶部”的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部。

要点一:document.documentElement.clientWidth || document.body.clientWidth; 获得可视区的宽度。后面是兼容chrome,前面是兼容其它浏览器。

要点二:oTop.style.left = screenw - oTop.offsetWidth +"px";  当页面加载时,让元素的位置位于页面最右边,用可视区的宽度减去元素本身的宽度。

要点三:oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px"; 当页面滚动时,元素的Y坐标位置等于可视区的高度减去元素本身的高度,加上滚动距离。

要点四:document.documentElement.scrollTop = document.body.scrollTop =0; 当点击元素时,让页面的滚动距离为0.写两个是为了兼容。
 
上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 var screenw = document.documentElement.clientWidth || document.body.clientWidth;
 var screenh = document.documentElement.clientHeight || document.body.clientHeight;
 oTop.style.left = screenw - oTop.offsetWidth +"px";
 oTop.style.top = screenh - oTop.offsetHeight + "px";
 window.onscroll = function(){
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
 }
 oTop.onclick = function(){
  document.documentElement.scrollTop = document.body.scrollTop =0;
 }
} 
</script>
</head>
<body style="height:1000px;">
<h1>返回顶部</h1>
<div id="to_top">返回顶部</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 #Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 #Javascript
JavaScript 变量、作用域及内存
Apr 08 #Javascript
JavaScript Function函数类型介绍
Apr 08 #Javascript
JavaScript 模块化编程(笔记)
Apr 08 #Javascript
JavaScript DOM事件(笔记)
Apr 08 #Javascript
javascript笛卡尔积算法实现方法
Apr 08 #Javascript
You might like
PHP 的几个配置文件函数
2006/12/21 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP 图片水印类代码
2012/08/27 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
JavaScript使用cookie
2007/02/02 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Python命名空间详解
2014/08/18 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python web框架学习笔记
2016/05/03 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python 类之间的参数传递方式
2019/12/20 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
XML文档面试题
2015/08/05 面试题
幼儿园中班开学寄语
2014/04/03 职场文书
双拥工作宣传标语
2014/06/26 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python