使用scrollTop返回顶部
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返回顶部的更多相关文章
- js返回顶部
1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...
- zepto的返回顶部scrollTop的动画解决方法
写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...
- js小效果:返回顶部 scrollTop 。 滚屏:animate
返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...
- JS——BOM操作(点击按钮返回顶部案例:scrollTop的用法)
点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- zepto返回顶部动画
点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
随机推荐
- pip安装插件库
升级:python -m pip install --upgrade pip 读excel:pip install xlrd 写入excel:pip install xlwt
- 解题2(IpIsSameSubNet)
题目描述 子网掩码是用来判断任意两台计算机的IP地址是否属于同一子网络的根据.子网掩码与IP地址结构相同,是32位二进制数,其中网络号部分全为“1”和主机号部分全为“0”.利用子网掩码可以判断两台主机 ...
- js实现商品颜色尺码联动以及购买数量的选择
<script type="text/javascript"> $(function(){ //初始化点击第一个颜色 jquery $("#colors a: ...
- oracle数据库连接不上
Oracle数据库1521端口telnet不通 现象:服务器的ip地址可以ping通,但是安装oracle过程中的指定的“1521”端口telnet不通过 解决办法:1.确保防火墙对1521端口开启: ...
- empty 与 remove 的区别
empty()移除指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p> ...
- x86寄存器总结
X86寄存器 ·x86寄存器分类: 8个通用寄存器:EAX.EBX.ECX.EDX.ESI.EDI.ESP.EBP 1个标志寄存器:EFLAGS 6个段寄存器:CS.DS.ES.FS.GS.SS 5个 ...
- 51nod 1163 最高的奖励
链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1163 1163 最高的奖励 基准时间限制:1 秒 空间限制:13 ...
- 字符串 String 格式化 format
String str=String.format("Hi,%s", "王力"); 保留两位数的整数: String str=String.format(&quo ...
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- Django的视图函数和路由系统中一些没有用过的小点
1.request对象 print("返回用户访问的url,但是不包括域名",request.path_info) print("返回请求的方法,全大写",re ...