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 解析Json字符串的性能比较分析代码
Dec 16 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
vue.js表格分页示例
2016/10/18 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
Python实现文件内容批量追加的方法示例
2017/08/29 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python-接口开发入门解析
2019/08/01 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python 模块导入问题汇总
2021/02/01 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
总经理助理工作职责
2014/02/06 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
人事任命通知书
2015/04/21 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python
Python 图片添加美颜效果
2022/04/28 Python