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 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
浅谈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实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP安全下载文件的方法
2016/04/07 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
js图片处理示例代码
2014/05/12 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Python自动生产表情包
2017/03/17 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
写自荐信有哪些不宜?
2013/10/17 职场文书
对公司合理化的建议书
2014/03/12 职场文书
会议开幕词
2015/01/28 职场文书
立项申请报告范本
2015/05/15 职场文书
中学总务处工作总结
2015/08/12 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书