用原生js做个简单的滑动效果的回到顶部

很多网页在下方都会放置一个“返回顶部”按钮，尤其是页面底部没有导航的网页，这样可以帮助访客重新找到导航或者重温一遍广告（想得真美）。随着近几年来 JavaScript 的应用日渐广泛，滑动效果无处不在，于是我也跟跟风，将返回顶部功能做成了滑动效果。后来为了更贴合物理特征， 改造做成了减速的滑动效果。

首先说一下原理吧，我们会获取滚动条到页面顶部的距离，然后上移一定的距离；再获取滚动条到页面顶部的距离，上移一定的距离（比上一次小一点）;以此类推 ...

<script type="text/javascript">
/**
* 回到页面顶部
* @param acceleration 加速度
* @param time 时间间隔 (毫秒)
**/
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16; 

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 speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 

// 如果距离不为零, 继续调用迭代本函数
if(x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
</script>

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的，但它们只在某些浏览器中起作用。至于那哪个在哪些浏览器起作用可以自己调试一下。

如何使用？

代码如下:

<a href="#" onclick="goTop();return false;">TOP</a>

赞 (0)

相关推荐

  • 基于JS实现回到页面顶部的五种写法(从实现到增强)

    写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style=&qu

  • 纯js实现页面返回顶部的动画(超简单)

    废话不多说,直接上代码 var scrollTop = document.body.scrollTop; document.body.style.marginTop = -scrollTop + 'px'; document.body.scrollTop = 0; document.body.style.transition = 'all 1s ease-in-out'; document.body.style.marginTop = 0; setTimeout(function () { do

  • js实现返回顶部效果

    话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript实现回到顶部特效

    HTML: <input id="btn1" type="button" value="回到顶部" /> CSS: #btn1{position:fixed;bottom:10px;right:10px;} JS: window.onload=funcition(){ var oBtn=document.getElementById("btn"); var timer=null; //申明一个变量看是否为系统还是用

  • js返回顶部实例分享

    话不多说,请看实例 1.HTML结构 <div class="return_top"></div> 2.css样式 .return_top{ width: 50px; height: 50px; background: url(../images/lanren.gif) no-repeat center #FF8D16; position:fixed; right: 30px; bottom: 30px; display: none; cursor: point

  • 用原生js做个简单的滑动效果的回到顶部

    很多网页在下方都会放置一个"返回顶部"按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果.后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离:再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ... <script type=&

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • JS实现的适合做faq或menu滑动效果示例

    本文实例讲述了JS实现的适合做faq或menu滑动效果.分享给大家供大家参考,具体如下: <!CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <meta http-equiv="Content-Type" content="text/html;

  • 原生JS实现的简单小钟表功能示例

    原生JS实现的简单小钟表功能示例

    本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 钟表</title> <style type="text/css"> body { background-color:#00A2D

  • vue.js做一个简单的编辑菜谱功能

    先给大家展示下效果图,如果感觉不错,请参考实现代码 1.先获取门店下的所有菜品类型.菜品名称.菜品id(list),也就是最大数据量 this.$http.post(ceshiApi+'getCyFoodAndFoodTypeForShopId',{shopId:this.shopId},{emulateJSON:true,credentials: true}).then(function(res){ if(res.data.type=='success'){ this.foodList = r

  • 原生JS实现的简单轮播图功能【适合新手】

    原生JS实现的简单轮播图功能【适合新手】

    本文实例讲述了原生JS实现的简单轮播图功能.分享给大家供大家参考,具体如下: 经过几天的努力,终于攻克了这一难题,于是迫不及待的想要分享给大家,编写之前,我也看了不少其他博主的博客,大多是用偏移量写的,对新手来说,还是有些难以理解,虽然可能实现的需求不一样,但我想先从简入手,所以自己查阅资料,修改bug,终于完成.话不多说,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

  • 原生Js 实现的简单无缝滚动轮播图的示例代码

       简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码.       原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

  • 原生js拖拽功能制作滑动条实例代码

    原生js拖拽功能制作滑动条实例代码

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: <div class="bar_wrap" id="wrap"><!--外包裹元素--> <div class="bar_container"><!--滑动条--> <div class=&qu

  • node.js做一个简单的爬虫案例教程

    node.js做一个简单的爬虫案例教程

    准备工作 首先,你需要下载 nodejs,这个应该没啥问题吧 原文要求下载 webstrom,我电脑上本来就有,但其实不用下载,完全在命令行里面操作就行 创建工程 准备工作做完了,下面就开始创建工程了 首先,在你想要放资源的地方创建文件夹,比如我在 E 盘里面创建了一个 myStudyNodejs 的文件夹 在命令行里面进入你创建的文件夹 如图 进入 e 盘:E: 进入文件夹:cd myStudyNodejs(你创建的文件夹的名字) 注意全是英文符号 初始化项目,在你创建的文件夹下面运行 npm

  • JS/jQuery实现简单的开关灯效果【案例】

    JS/jQuery实现简单的开关灯效果【案例】

    本文实例讲述了JS/jQuery实现简单的开关灯效果.分享给大家供大家参考,具体如下: 实现效果: html结构只有两个button标签 <button id="left">开灯</button> <button id="right">关灯</button> 方法一:用原生js来做 <script> //1.获取页面元素 var left=document.getElementById('left'); v

随机推荐