`
shizisongsong
  • 浏览: 39386 次
文章分类
社区版块
存档分类
最新评论

用原生JavaScript做个简单的回到顶部

阅读更多

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

首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ... 可以500%提高开发效率的前端UI框架!

<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 其实都是一样的,但它们只在某些浏览器中起作用。至于那哪个在哪些浏览器起作用可以自己调试一下。可以500%提高开发效率的前端UI框架!

如何使用?

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

 

 

0
0
分享到:
评论

相关推荐

    scrollTop原生JavaScript实现的回到顶部库

    本文将详细介绍如何使用原生JavaScript实现一个适应PC和移动设备,且兼容到IE7的"scrollTop"回到顶部库。 一、scrollTop属性 在JavaScript中,`scrollTop`属性用于获取或设置元素的垂直滚动位置。对于一个元素(如...

    回到顶部JavaScript插件

    在这款名为"toTop"的Demo中,开发者采用原生JavaScript编写了这个插件,没有依赖任何外部库,如jQuery。原生JavaScript的使用意味着代码更简洁、加载更快,并且对浏览器的兼容性更强。这样的实现方式对于学习...

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

    标题中的“用原生js做个简单的滑动效果的回到顶部”指的是使用JavaScript的原生功能实现一种平滑的滚动效果,让页面从当前位置逐渐滚动回顶部。这种效果常见于网页设计中,尤其是在长页面中,帮助用户快速返回页面...

    JS 简单的点击返回顶部的功能

    例如,对于不支持jQuery的环境,可以使用原生JavaScript实现相同的功能。此外,还可以添加过渡效果或自定义动画,以提供更丰富的用户体验。 在压缩包文件"demo"中,可能包含了这个功能的完整示例代码,包括HTML、...

    pulltorefresh移动端下拉刷新库原生JavaScript实现

    2. **滑动回弹效果**:为了提升用户体验,可以添加回弹动画,使页面在刷新结束后自然滑动回顶部。 3. **自定义样式和行为**:允许用户自定义刷新指示器的样式,或者添加额外的回调函数,以便在刷新前后执行特定操作...

    回顶部的html代码

    一个简单的回顶部按钮可以是一个`&lt;button&gt;`或`&lt;a&gt;`标签,放在页面底部或者侧边栏。例如: ```html 回到顶部 ``` 这里的`#top`是一个锚点,用于链接到页面顶部。`id="back-to-top"`是为了方便后续的CSS和JavaScript...

    原生JS实现的平滑返回顶部特效源码.zip

    这个"原生JS实现的平滑返回顶部特效源码.zip"文件包含了一个使用JavaScript(尤其是原生JS,即非jQuery等库)编写的实现该功能的代码示例。以下是对这个知识点的详细说明: 首先,平滑返回顶部特效的核心在于模拟...

    原生JS实现平滑回到顶部组件

    原生JavaScript实现平滑回到顶部组件是一个常见的网页交互功能,主要目的是提高用户的浏览体验。当用户在长页面中滚动一定距离后,为了方便快速回到页面顶部,会显示一个返回顶部的按钮。这篇文章将探讨如何使用纯...

    javascript 原生代码实现滚动条

    JavaScript原生代码实现滚动条是一种常见的前端开发技术,它允许开发者自定义浏览器的默认滚动行为,以创造出更个性化和交互性的用户体验。在本篇讨论中,我们将深入探讨如何使用JavaScript来实现这一功能,并通过...

    js+css实现回到顶部按钮(back to top).docx

    本文提供了一个完整的解决方案,使用JS和CSS实现回到顶部按钮的功能,可以帮助开发者快速实现这个功能。 知识点: 1. 使用position:fixed属性来固定元素的位置。 2. 使用CSS3中的transition属性来添加渐变效果。 3...

    回到顶部代码

    除了使用jQuery实现回到顶部的功能外,还可以考虑使用原生JavaScript或Vue.js、React等现代前端框架来实现这一功能,这些框架提供了更多的灵活性和性能优化手段。 综上所述,“回到顶部代码”是一个简单但非常实用...

    超全的javascript应用小程序

    JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在创建交互式...通过学习这些原生JavaScript技巧,开发者可以更好地构建高效、可维护的小型JavaScript应用,无论是简单的交互还是复杂的功能,都能游刃有余。

    详解原生JS回到顶部

    本文将详细介绍使用原生JavaScript实现“回到顶部”的技术细节。 首先,关于锚点功能,它是HTML超链接的一部分,利用HTML的id属性可以在页面中创建一个锚点位置。用户可以通过点击一个链接,跳转到页面中指定id的...

    固定导航,回到顶部

    用原生javascript写的固定导航、回到顶部、焦点图切换效果

    原生js实现京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)

    在本项目中,我们将探讨如何使用原生JavaScript、HTML和CSS技术来实现京东首页的一些关键交互功能,包括搜索框、菜单栏的滑动弹回、倒计时、Banner动画以及页面缓慢返回顶部的效果。这些都是现代网页开发中常见的...

    回到顶部模块

    "回到顶部模块"是网站设计中的一个重要组成部分,它通常是一个小型的交互元素,允许用户通过单击或触摸轻松地将浏览窗口滚动回页面顶部。在网页内容丰富的网站中,这个功能尤其有用,因为它提升了用户体验,使得用户...

    效果 回到顶部

    如果你需要兼容不支持jQuery的环境,可以使用原生JavaScript来实现相同的功能,但这将涉及到更复杂的事件处理和动画编写。 在压缩包中的"回到顶部"文件,很可能是包含了上述代码的HTML、CSS和JavaScript文件,你...

    弹性返回顶部代码,兼容各大浏览器

    在网页设计中,"弹性返回顶部"功能是一个常见的交互元素,它允许用户在浏览页面时,轻松地将页面滚动回顶部。这个功能尤其在长页面中非常有用,减少了用户的滚动操作,提升了用户体验。本篇文章将深入探讨如何实现...

Global site tag (gtag.js) - Google Analytics