/*如果想实现点击一个按钮让滚动条回到最顶部的功能,首先可能就会想到它是从底部位置移动到顶部的位置

它是一个运动的过程,只要知道当前位置(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实现页面回到顶部的功能的更多相关文章

  1. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  2. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  3. jQuery实现页面回到顶部功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  5. 页面回到顶部的三种实现(锚标记,js)

    一.使用锚标记返回页面顶部 使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么. 页面顶部放置: <a name="top" id ...

  6. JavaScript实现网页回到顶部效果

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...

  7. jQuery实现“回到顶部”按钮功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery-使页面回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

随机推荐

  1. 使用BigDecimal报的错

    错误:java.lang.arithmeticexception: non-terminating decimal expansion; no exact representa  小数位膨胀 解决方法 ...

  2. Windows下python2.7安装64位mysqlclient

    在使用python调用mysql数据库的时候,需要引入对应的数据包 import MySQLdb 如果提示找不到对应的包,说明还需要安装对应的mysql数据库客户端操作的python包.在python ...

  3. Selenium学习资源和网站

    用于收集常用的网站和学习资源: 文章: Selenium私房菜系列--总章 WEB 自动化测试工具 Selenium 简介及其应用 Selenium教程 和我一起学 Selenium WebDrive ...

  4. 【redis源码阅读】redis对象

    结构定义 在redis中,对象的数据结构定义如下: ​typedef struct redisObject { ​unsigned type:4; ​unsgined encoding:4; ​uns ...

  5. JS基础四

    1.函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 2.闭包,指的是 ...

  6. [ZJOI2007] 矩阵游戏

    Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两 ...

  7. MYSQL数据库学习十七 日志管理

    17.1 MySQL软件所支持的日志 MySQL所支持的日志文件里,除了二进制日志文件外,其他日志文件都是文本文件.默认情况下,MySQL只会启动错误日志文件,其他日志文件则需要手动启动. 二进制日志 ...

  8. Tomcat8配置tomcat-users.xml配置

    默认tomcat-user.xml中的角色和用户配置示例如下: <!-- <role rolename="tomcat"/>  <role rolename ...

  9. [poj2185]Milking Grid_KMP

    Milking Grid poj-2185 题目大意:给出一个字符矩阵,求最小覆盖矩阵(可以残余). 注释:$1\le R\le 10^5$,$1\le C \le 75$ 想法:和bzoj1355不 ...

  10. SQLite学习手册(数据表和视图)

    如何列出SQLite数据库中的所有表 SQLite数据库中的信息存在于一个内置表sqlite_master中,在查询器中可以用 select * from sqlite_master 来查看,如果只要 ...