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 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python编程中的异常处理教程
2015/08/21 Python
Python字符串切片操作知识详解
2016/03/28 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
《三顾茅庐》教学反思
2014/04/10 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
地质灾害防治方案
2014/05/14 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
用Python将库打包发布到pypi
2021/04/13 Python