使用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返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
随机推荐
- 1.1、CDH 搭建Hadoop在安装之前(配置网络名称)
重要: CDH需要IPv4.不支持IPv6.提示:粘合时,请使用bond0 IP地址,因为它代表所有聚合链接. 按如下方式配置群集中的每个主机,以确保所有成员可以相互通信: 将主机名设置为唯一名称(不 ...
- ss源码学习--工作流程
ss的local端和server端的工作流程相似,因此复用了TCPRelay类和TCPRelayHandler类. 两端均是使用TCPRelay类监听连接,并使用TCPRelayHandler类处理请 ...
- WPF背景透明内嵌WebBrowser不显示问题,即AllowsTransparency = true 和 Webbrowser 等控件显示冲突
首先感谢两位先导者: 1. 解决 WPF AllowsTransparency = true 和 Webbrowser 等控件显示冲突 原文地址:https://www.cnblogs.com/zhi ...
- FPGA基础知识1
1.乘法 在FPGA中,乘法运算可以分为 1)信号与信号之间的运算,用乘法器核实现: 2)常数与信号之间的运算,利用移位及加减法实现. A x 16 = A左移4位: A x 20 = A x 16 ...
- hdu 1540 线段树
这题的意思是现在有一些村庄成一条直线排列,现在有三个操作,D:摧毁一个指定的村庄,Q:询问与指定村庄相连的村庄个数, 就是这个村庄向左和向右数村庄数量,遇到尽头或损坏的村庄为止,这个就是与这个村庄相连 ...
- 【转】收集 jetty、tomcat、jboss、weblogic 的比较
jetty Jetty 是一个开源的servlet容器,它为基于Java的web容器,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开 ...
- DES对称加密
DES是对称性加密里面常见一种,全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法.密钥长度是64位(bit),超过位数密钥被忽略.所谓对称性加密,加密 ...
- iOS 打包方式
https://www.cnblogs.com/wengzilin/p/4601684.html
- [leetcode]300. Longest Increasing Subsequence最长递增子序列
Given an unsorted array of integers, find the length of longest increasing subsequence. Example: Inp ...
- 本地DNS解析
企业搭配本地域名,进行解析 2018年07月23日 09:31:46 阅读数:2 搭建dns服务器,可以进行域名解析,这样方便企业项目本地测试. 可以实现,输入域名访问本地服务器 一.安装软件 1.下 ...