scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

　　由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能

　　[注意]关于页面的scrollTop的兼容问题详细内容移步至此

<body style="height:2000px;">

<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>

<script>

test.onclick = function(){

document.body.scrollTop = document.documentElement.scrollTop = 0;

}

</script>

</body>

使用scrollTop返回顶部的更多相关文章

  1. js返回顶部

    1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...

  2. zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...

  3. js小效果：返回顶部 scrollTop 。 滚屏：animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  4. JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

    点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  6. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  7. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  8. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  9. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

随机推荐

  1. SVN 不显示状态图标--解决方法

    [SVN 不显示状态图标--解决方法] 在名字前面加空格, 三个六个空格随意: 参考:https://www.cnblogs.com/lzpong/p/6187366.html

  2. 无线渗透wpa加密路由器

    破解wpa加密路由器的原理不同于破解wep加密路由器,只能通过暴力破解获取. 但是获取握手keystream的原理差不多 首先杀死可能会和破解冲突的进程 airmon-ng check kill 开启 ...

  3. mysql 定时备份任务

    备份方案: 本地备份并同步至远程服务器,保留30天数据 1. 本地数据库备份,备份数据库gold_ecooy,naiang#!/bin/bash#xliang#Created Time: 2018-1 ...

  4. 【C++】SGI-STL空间配置器

    第一级配置器是对C的内存分配函数malloc,free,realloc的简单封装,用来分配大于128bytes的区块. 第二级配置器管理16个free-lists链表,各自管理8-128bytes的小 ...

  5. Spring知识结构

    课程目标:          1. 回顾                    * 传统的开发模式                    * Struts与Hibernate可以做什么事?       ...

  6. 七：python 对象类型详解三：列表

    一:列表简介: 1,列表可以包含任何种类的对象:数字.字符串甚至集合对象类型.列表都是可变对象,它们都支持在原处修改的操作,可以通过指定的偏移量和分片.列表方法调用.删除语句等方法来实现.关键的作用有 ...

  7. 枚举+最短路 poj1062

    这里有个非常坑的地方,还有比酋长地位还更高的人,我也是看了论坛才知道... 在这里我把编号1看成终点,优惠价格看成相应的替代品编号到可替代品编号的权值,比如说有了2再加8000就到了1,那么2到1的弧 ...

  8. 音频播放 音乐 MediaPlayer

    MediaPlayer对象的生命周期如下: Idle 状态:当使用new()方法创建一个MediaPlayer对象或者调用了其reset()方法时,该MediaPlayer对象处于idle状态.这两种 ...

  9. PP助手上传失效

    新建的iOS项目运行到iPad上,因为需要播放本地音视频图像,所以借助PP助手将MAC上的东西导入IPAD上的项目的document里(pp助手的应用游戏----应用列表功--APP右下角查看文件) ...

  10. 【Linux 进程】fork父子进程间共享数据分析

    之前我们通过fork()函数,得知了父子进程之间的存在着代码的拷贝,且父子进程都相互独立执行,那么父子进程是否共享同一段数据,即是否存在着数据共享.接下来我们就来分析分析父子进程是否存在着数据共享. ...