原生JavaScript实现页面回到顶部的功能
/*如果想实现点击一个按钮让滚动条回到最顶部的功能,首先可能就会想到它是从底部位置移动到顶部的位置
它是一个运动的过程,只要知道当前位置(current Position)和想要到达的位置(target Position)不就可以啦
只不过以前用的都是元素div啦 img啦等等等
现在不过是把元素的移动换成滚动条的移动
好了 上代码 我尽量写的清晰一点*/
function $(id){return document.getElementById(id);} //通过ID获取元素
function show(obj){obj.style.display="block"}
function hide(obj){obj.style.display="none"}
function scroll(){
/*IE9或者IE9+
pageXOffset和pageYOffset是window对象的一个属性
它的意思是:返回文档在窗口左上角(0,0)水平和垂直方向滚动的像素
其实就是代表一个水平滚动条,一个垂直滚动条。*/
if(window.pageXOffset)
{
return{top:window.pageYOffset}
}
/*标准浏览器,谷歌,火狐啥的
document.compatMode是判断浏览器的渲染方式当文档声明doctype的时候
返回值是CSS1Commpat(标准兼容模式开启)
否则返回的是BackCompact(标准兼容模式关闭)
兼容性无非是就在不同版本的浏览器用不同的代码而已!*/
else if(document.compatMode=="CSS1Compat"){
return{top:document.documentElement.scrollTop}
}
//也可以简写 else return{top:document.body.scrollTop} 这样写不过是为了让大家明白
else if(document.compatMode=="BackCompat"){
return{top:document.body.scrollTop}
}
}
var obj=$("returnTop"),y=0,timer=null;
//然后写一个滚动条监听事件,只要滚动条滚动就可以获得滚动条的top值
window.onscroll=function(){
scroll().top>0?show(obj):hide(obj);//当滚动条的top值大于0的时候obj才显示
y=scroll().top;
}
//点击事件
obj.onclick=function(){
//设置定时器之前清除定时器
clearInterval(timer);
timer=setInterval(function(){
y=y-30;//最终的位置是(0,0) 减少的数字随便设置
window.scrollTo(0,y);//根据参数移动到相应的位置(绝对定位)
if(y<=0){
clearInterval(timer);//清除定时器
}
},1000/60);
}
ps:每当完成一件事情的时候莫名的想唱歌!!!之前太马虎了 有错误没发现 因为直接在博客里写的
现在测试成功!
原生JavaScript实现页面回到顶部的功能的更多相关文章
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- 页面回到顶部的三种实现(锚标记,js)
一.使用锚标记返回页面顶部 使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么. 页面顶部放置: <a name="top" id ...
- JavaScript实现网页回到顶部效果
在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery-使页面回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
随机推荐
- 使用BigDecimal报的错
错误:java.lang.arithmeticexception: non-terminating decimal expansion; no exact representa 小数位膨胀 解决方法 ...
- Windows下python2.7安装64位mysqlclient
在使用python调用mysql数据库的时候,需要引入对应的数据包 import MySQLdb 如果提示找不到对应的包,说明还需要安装对应的mysql数据库客户端操作的python包.在python ...
- Selenium学习资源和网站
用于收集常用的网站和学习资源: 文章: Selenium私房菜系列--总章 WEB 自动化测试工具 Selenium 简介及其应用 Selenium教程 和我一起学 Selenium WebDrive ...
- 【redis源码阅读】redis对象
结构定义 在redis中,对象的数据结构定义如下: typedef struct redisObject { unsigned type:4; unsgined encoding:4; uns ...
- JS基础四
1.函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 2.闭包,指的是 ...
- [ZJOI2007] 矩阵游戏
Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两 ...
- MYSQL数据库学习十七 日志管理
17.1 MySQL软件所支持的日志 MySQL所支持的日志文件里,除了二进制日志文件外,其他日志文件都是文本文件.默认情况下,MySQL只会启动错误日志文件,其他日志文件则需要手动启动. 二进制日志 ...
- Tomcat8配置tomcat-users.xml配置
默认tomcat-user.xml中的角色和用户配置示例如下: <!-- <role rolename="tomcat"/> <role rolename ...
- [poj2185]Milking Grid_KMP
Milking Grid poj-2185 题目大意:给出一个字符矩阵,求最小覆盖矩阵(可以残余). 注释:$1\le R\le 10^5$,$1\le C \le 75$ 想法:和bzoj1355不 ...
- SQLite学习手册(数据表和视图)
如何列出SQLite数据库中的所有表 SQLite数据库中的信息存在于一个内置表sqlite_master中,在查询器中可以用 select * from sqlite_master 来查看,如果只要 ...