对scrollTop的研究
本文主要从原生 JS以及jquery来说明scrollTop是如何实现的，以及一些技巧，以及在PC端和移动端使用的差异。
首先用代码表示下如何回到顶部的简单原理
<!doctype html>
<html lang="zh_EN">
<head>
<meta charset="UTF-8">
<title>滚动条距离</title>
<script>
window.onload=function(){
document.onclick=function(){
//滚动条滚动距离
//document.documentElement 适用于除谷歌 滚动条属于文档
//document.body.scrollTop 适用于谷歌 滚动条属于body
//alert(document.documentElement.scrollTop);
//alert(document.body.scrollTop);
//处理兼容
//因都存存在这两种属性 要回到顶部需分别设置（暂时想不出好方法）
document.documentElement.scrollTop=;
document.body.scrollTop=;
}
}
</script>
</head>
<body style="height:2000px;"> </body>
</html>
用原生如此实现在jquery中如何实现呢
<!doctype html>
<html lang="zh_EN">
<head>
<meta charset="UTF-8">
<title>滚动条距离</title> <script src="jquery.min.js"></script>
</head>
<body style="height:2000px;"> <script>
$(function(){
$(document).click(function(){
//$('body').scrollTop(0)//谷歌可以实现，其他不支持
$(window).scrollTop();//可以实现都回到顶部
}) }) </script>
</body>
</html>
这样都会支持，但效果显得格外生硬。如何产生运动效果来达到更好的体验呢，请看下面的代码片段
<!doctype html>
<html lang="zh_EN">
<head>
<meta charset="UTF-8">
<title>滚动条距离</title> <script src="jquery.min.js"></script>
</head>
<body style="height:2000px;"> <script>
$(function(){
$(document).click(function(){
//用window普通可以实现但产生运动效果在浏览器上都会报错
//$(window).animate({'scrollTop':0},1000);
//从网上查到这个方法
//$(document.body).animate({'scrollTop':0},1000);//经过测试只有在谷歌上有作用
//难道jquery没兼容好这个方法？？？
//经过反复查找终于找到答案如下
$('body,html').animate({'scrollTop':},);//完美实现 么么滴 也考虑到谷歌和其他的应用场景不同
}) }) </script>
</body>
</html>
考虑到移动端问题在 zepto中的scrolltop似乎也应用的不是很理想，那我们就用原生实现吧。谁让移动端内核都是webkit呢，代码如下
<!doctype html>
<html lang="zh_EN">
<head>
<meta charset="UTF-8">
<title>滚动条距离</title> </head>
<body style="height:2000px;"> <script> function scroll(scrollTo, time) {
var scrollFrom = parseInt(document.body.scrollTop),
i = ,
runEvery = ; // run every 5ms scrollTo = parseInt(scrollTo);
time /= runEvery; var interval = setInterval(function () {
i++; document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom; if (i >= time) {
clearInterval(interval);
}
}, runEvery);
} document.body.onclick=function () {
scroll('', );
}; </script>
</body>
</html>
不知道是不是解决了回到底部的问题，当然还有插件可以使用，但基本都基于此类原理，关于在什么时候出现回到顶部的箭头我就不再说明了(相当简单)，当然也有用#top实现，不过个人感觉体验不是很好。如果还有疑惑欢迎交流讨论，能力有限只能做初步探讨
对scrollTop的研究的更多相关文章
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...
- 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight
先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最 ...
- Javascript scrollTop 20大洋
花了20大洋,买了一个视频,这是读书笔记 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
- js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）
js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...
- 像VUE一样写微信小程序-深入研究wepy框架
像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...
- 深入研究-webkit-overflow-scrolling:touch及ios滚动
1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效 ...
- 关于document.body.scrollTop与documentElement.scrollTop
遇到document.body.scrollTop值为0的问题 今天在写一个小demo的时候,使用滚动条,我用document.body.scrollTop获取滚动条的位置,但是很奇怪的发现在谷歌上获 ...
- 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】
源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...
- myslide 插件开发知识点总结和 css3 动画性能问题的研究
myslide 插件开发知识点总结和 css3 动画性能问题的研究 这篇文章主要是总结最近开发过程中遇到的问题.有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的. 1.手机端的 slid ...
随机推荐
- 随手可得的Application对象
在Android的开发其中,Application和Context对象应该是我们接触最多的对象了,特别是Context对象. 当我们在某个Activity或者Service其中时,因为它们本身就是Co ...
- Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)
Crazy Bobo Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Tota ...
- AVR第5课：蜂鸣器
下面是蜂鸣器的电路图. 代码:蜂鸣器代码. <span style="font-size:18px;">/* *info:buzzer *author:chenlu * ...
- Fragment之一：Fragment入门 分类： H1_ANDROID 2013-11-15 18:16 2799人阅读 评论(2) 收藏
参考自张泽华视频 Fragment是自Android3.0后引入的特性,主要用于在不同的屏幕尺寸中展现不同的内容. Fragment必须被嵌入Activity中使用,总是作为Activity的组成部分 ...
- jquery-11 jquery中的事件切换如何实现
jquery-11 jquery中的事件切换如何实现 一.总结 一句话总结:事件切换hover()和toggle()函数.参数两个,都是函数,依次执行两个函数. 1.如何实现单击切换图片? 用togg ...
- windows 下安装git
Git是当今最流行的版本控制软件,它包含了许多高级工具,这里小编就讲一下Git的安装. 首先如下图:(点击next) 第二步:文件位置存储,可根据自己盘的情况安装 第三步:安装配置文件,自己需要的都选 ...
- form表单上传附件的几种方法
问题描述:在网页开发过程中,当需要上传附件(图片,音频,视频等)时,常规方法是使用form表单进行提交,这里总结一下form表单提交的几种方法. 参考地址:http://www.cnblogs.com ...
- Global Git ignore - Stack Overflow
https://stackoverflow.com/questions/7335420/global-git-ignore git config --global core.excludesfile ...
- 网络异常与SQL Server事务
SQL Server事务遭遇网络异常时的处理机制浅析 SQL Server数据库中,如果应用程序正在执行一个事务的时候突然遭遇了网络异常,例如网络掉包,网络中断等,那么这个事务会怎么样? SQL Se ...
- Ajax基础与Json应用(一）
一.Ajax概念 Ajax是异步的javacript和xml 发音: Ajax [ˈeɪˌdʒæks] 二.同步与异步 传统方式(同步):一个请求对应一个回应,他们是同步的,回应不完成,没办法对这个页 ...