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

 更新时间:2014年10月15日 17:19:18   投稿:whsnow  
很多网页在下方都会放置一个“返回顶部”按钮,这样可以帮助访客重新找到导航或者重温一遍广告,于是将返回顶部功能做成了滑动效果

很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 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>

相关文章

  • Javascript中call的两种用法实例

    Javascript中call的两种用法实例

    这篇文章主要介绍了Javascript中call的两种用法实例,有需要的朋友可以参考一下
    2013-12-12
  • 微信小程序授权登录的最新实现方案详解(2023年)

    微信小程序授权登录的最新实现方案详解(2023年)

    最近由于公司需要研究了一下微信小程序的开发,特此记录一下小程序登录授权的流程,便于自己理解,也希望对他人有多帮助,下面这篇文章主要给大家介绍了关于微信小程序授权登录的最新实现方案的相关资料,需要的朋友可以参考下
    2023-02-02
  • js倒计时抢购实例

    js倒计时抢购实例

    这篇文章主要介绍了js倒计时简单实现方法,方便一些提示重要日期的来临,本实例特别适合用于商品倒计时抢购活动,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 深入浅析javascript立即执行函数

    深入浅析javascript立即执行函数

    在Javascript中,任何function在执行的时候都会创建一个执行上下文,因为为function声明的变量和function有可能只在该function内部,这个上下文,在调用function的时候,提供了一种简单的方式来创建自由变量或私有子function。
    2015-10-10
  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    这篇文章主要介绍了JS+DIV+CSS排版布局实现美观的选项卡效果,通过简单的div+css布局结合JavaScript切换页面样式实现美观的选项卡效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Openlayers学习之加载鹰眼控件

    Openlayers学习之加载鹰眼控件

    这篇文章主要介绍了Openlayers学习之加载鹰眼控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • layui加载数据显示loading加载完成loading消失的实例代码

    layui加载数据显示loading加载完成loading消失的实例代码

    今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • webpack4.0 入门实践教程

    webpack4.0 入门实践教程

    webpack4.0发布了一段时间了,这篇文章主要介绍了webpack4.0 入门实践教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • JavaScript 匿名函数和闭包介绍

    JavaScript 匿名函数和闭包介绍

    这篇文章主要介绍了JavaScript 匿名函数和闭包介绍,需要的朋友可以参考下
    2015-04-04
  • 详解微信小程序动画Animation执行过程

    详解微信小程序动画Animation执行过程

    这篇文章主要介绍了微信小程序动画Animation执行过程 / 实现过程 / 实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09

最新评论