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. zabbix 利用python脚本实现短信告警

    一.编写脚本 cd /usr/local/zabbix-4.0.3/share/zabbix/alertscripts vi zabbix_sms.py 内容如下: #!/usr/bin/python ...

  2. w3af的使用

    编解码工具 配置身份 基本身份认证 明文用base64编码 NTML认证方式,微软特有的加密方式 form表单身份认证 这样基于表单的认证就配置好了 基于cookie认证 点击后面的感叹号,它会有co ...

  3. IDEA2017-破解方法

    @方法一 第一步:下载jar 包 地址:https://github.com/locationbai/registerIDEA_2017.3.2_jar 第二部:将下载好的jar放在idea安装目录下 ...

  4. pta l2-16（愿天下有情人都是失散多年的兄妹）

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805061769609216 题意:两个异性的人五服之内不得通婚 ...

  5. Python+Selenium学习--设置等待时间

    场景 sleep():设置固定休眠时间.python 的time 包提供了休眠方法sleep() ,导入time 包后就可以使用sleep()进行脚本的执行过程进行休眠.implicitly_wait ...

  6. TZOJ 1705 Dining(拆点最大流)

    描述 Cows are such finicky eaters. Each cow has a preference for certain foods and drinks, and she wil ...

  7. centos 7下部署grpc

    gRPC 是一个高性能.开源和通用的 RPC 框架,面向移动和 HTTP/2 设计.目前提供 C.Java 和 Go 语言版本,分别是:grpc, grpc-java, grpc-go. 其中 C 版 ...

  8. AnguarJS——第10章 路由

    第10章 路由 一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图,路由则是实现这一功能的关键. 10.1 SPA SPA(Single Page Application)指的是通 ...

  9. MySQL安装（windows版本）

    1.下载.MySQL http://dev.mysql.com/downloads/mysql/ 下载windows的zip包,解压后,添加path路径bin, 系统环境变量->path-> ...

  10. Java面试基础知识(1)

    1.final, finally, finalize的区别 final:修饰符(关键字)如果一个类被声明为final,没有子类也不能被继承.因此一个类不能既被声明为 abstract的,又被声明为fi ...