js平滑返回顶部代码

随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧

注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop

 1 /**
 2 * JavaScript脚本实现回到页面顶部示例
 3 * @param acceleration 速度
 4 * @param stime 时间间隔 (毫秒)
 5 **/
 6 function gotoTop(acceleration,stime) {
 7    acceleration = acceleration || 0.1;
 8    stime = stime || 10;
 9    var x1 = 0;
10    var y1 = 0;
11    var x2 = 0;
12    var y2 = 0;
13    var x3 = 0;
14    var y3 = 0;
15    if (document.documentElement) {
16        x1 = document.documentElement.scrollLeft || 0;
17        y1 = document.documentElement.scrollTop || 0;
18    }
19    if (document.body) {
20        x2 = document.body.scrollLeft || 0;
21        y2 = document.body.scrollTop || 0;
22    }
23    var x3 = window.scrollX || 0;
24    var y3 = window.scrollY || 0;
25
26    // 滚动条到页面顶部的水平距离
27    var x = Math.max(x1, Math.max(x2, x3));
28    // 滚动条到页面顶部的垂直距离
29    var y = Math.max(y1, Math.max(y2, y3));
30
31    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
32    var speeding = 1 + acceleration;
33    window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
34
35    // 如果距离不为零, 继续调用函数
36    if(x > 0 || y > 0) {
37        var run = "gotoTop(" + acceleration + ", " + stime + ")";
38        window.setTimeout(run, stime);
39    }
40 }
时间: 2024-10-10 07:42:41

js平滑返回顶部代码的相关文章

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi

返回顶部代码!

返回顶部代码! <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script></head><style

jQuery火箭图标返回顶部代码

在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 很酷炫哦! 如果第一次自定义博客园,需要申请权限 点击博客园的[管理] → [设置]→ 一直往下拉, 找到[博客侧边栏公告(支持HTML代码)(申请JS权限)] 向[email protected] 发送邮件, 为了尽快通过权限申请, 邮件模板如下: 尊敬的博客园管理员: 请问是否可以帮我开通js权限,我需要一些简单的js来解决问题,例如鼠标点击特效.代码高亮等外观调整. 谢谢您的支持! 如图: 申请成功后可以

jQuery制作带有微信二维码扫描的页面返回顶部代码

原文:jQuery制作带有微信二维码扫描的页面返回顶部代码 源代码下载地址:http://www.zuidaima.com/share/1607126062287872.htm 版权声明:本文为博主原创文章,未经博主允许不得转载.

简单返回顶部代码及注释说明

最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合“返回顶部”功能来取得更好的体验了.当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高. 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 h

转载 | 网页中返回顶部代码(多种方法)

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a>

简单的返回顶部代码

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a>方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a> 

[转]常用返回顶部代码

转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会显示这个锚标记. <aname="top"id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可. 页面底部放置: <ahref="#top"target="

简单返回顶部代码

动态按需加载返回顶部,css侧边屏幕绝对定位,结合简单jQuery动画实现更好体验 /*默认样式,主要是position:fixed实现屏幕绝对定位,ie6不支持position:fixed效果*/ #gotoTop{/*返回顶部按钮的位置与样式*/ display:none; position:fixed; text-align:center;/*实现按钮内部字体的水平居中 */ top:75%;/*定位向上的位置*/ left:50%;/* 相对于水平向右移50% */ cursor:poi