js平滑返回顶部代码
随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧
注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop
/**
* JavaScript脚本实现回到页面顶部示例
* @param acceleration 速度
* @param stime 时间间隔 (毫秒)
**/
function gotoTop(acceleration,stime) {
acceleration = acceleration || 0.1;
stime = stime || 10;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speeding = 1 + acceleration;
window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
// 如果距离不为零, 继续调用函数
if(x > 0 || y > 0) {
var run = "gotoTop(" + acceleration + ", " + stime + ")";
window.setTimeout(run, stime);
}
}
js平滑返回顶部代码的更多相关文章
- qq空间返回顶部代码
点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- css 简单 返回顶部 代码及注释说明
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- [html][转]常用返回顶部代码
转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...
- JavaScript/Jquery返回顶部代码
<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...
随机推荐
- OpenSNS开发笔记(1)
数据分页: $Data = M('Channel'); // 实例化Data数据模型 $content = $Data->page($page, 4)->select(); $totalC ...
- Win10 QQ五笔默认中文,InputMode默认中文
Win10系统安装了QQ五笔后,InputMode默认英文,必须用鼠标点或者按 Ctrl+空格才能转换为中文.非常不方便. 即使将微软拼音默认为中文也不管用,解决方法如下: 设置后,无论你打开运行.记 ...
- 暴风冯鑫:去美国香港的99%都亏,互联网公司打死都要回A股
“上市之后,我回答得最多的两句话:一句是运气好:另一句是有好运气要好好地使用它.” 5月18日,暴风科技上市55天后,首享科技大厦办公室里,暴风科技CEO冯鑫这样对我说. 在经历了36个涨停之 ...
- WebResource.axd 404 错误
再对程序进行发布的时候,出现以下情况 复制出错误信息: 网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Triden ...
- 360手机卫士会影响Widget的运行
最近开发了一个Widget,老是运行时间长了就会出现NullPointerException错误,一直不知道是什么原因造成的,后来把Widget加入360一键清理的保护名单,错误就少很多,但是仍然有错 ...
- Eclipse设置风格
如果觉得Eclipse的颜色太刺眼,可以修改背景与字体颜色,方法如下: (1)到http://eclipsecolorthemes.org/下载主题文件,可以选择xml文件或者epf文件: (2)Ec ...
- 反编译APK文件
有时源代码丢失了,这时如果有apk文件的话,是可以对apk文件反编译得到源文件的,本文介绍一下简单的反编译apk文件的过程. 1.工具 反编译apk需要的工具有两个:apk2java和apktool, ...
- IOS高德地图逆地理编码定位+网络判断
先说下这功能的流程, 流程:判断用户是否联网--->获取用户地理位置经纬度--->通过经纬度去查询地理位置名称 //高德地图 @property (nonatomic, strong) ...
- Android SDK 国内镜像及配置方法
东软信息学院的 Android SDK 镜像,比配置代理下载快. 配置地址, http://mirrors.neusoft.edu.cn/configurations.we#android 配置步骤: ...
- GJM : 数据结构 - 轻松看懂机器学习十大常用算法 [转载]
转载请联系原文作者 需要获得授权,非法转载 原文作者将享受侵权诉讼 文/不会停的蜗牛(简书作者)原文链接:http://www.jianshu.com/p/55a67c12d3e9 通过本篇文章可以 ...