很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 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>
相关推荐
本文将详细介绍如何使用原生JavaScript实现一个适应PC和移动设备,且兼容到IE7的"scrollTop"回到顶部库。 一、scrollTop属性 在JavaScript中,`scrollTop`属性用于获取或设置元素的垂直滚动位置。对于一个元素(如...
在这款名为"toTop"的Demo中,开发者采用原生JavaScript编写了这个插件,没有依赖任何外部库,如jQuery。原生JavaScript的使用意味着代码更简洁、加载更快,并且对浏览器的兼容性更强。这样的实现方式对于学习...
标题中的“用原生js做个简单的滑动效果的回到顶部”指的是使用JavaScript的原生功能实现一种平滑的滚动效果,让页面从当前位置逐渐滚动回顶部。这种效果常见于网页设计中,尤其是在长页面中,帮助用户快速返回页面...
例如,对于不支持jQuery的环境,可以使用原生JavaScript实现相同的功能。此外,还可以添加过渡效果或自定义动画,以提供更丰富的用户体验。 在压缩包文件"demo"中,可能包含了这个功能的完整示例代码,包括HTML、...
2. **滑动回弹效果**:为了提升用户体验,可以添加回弹动画,使页面在刷新结束后自然滑动回顶部。 3. **自定义样式和行为**:允许用户自定义刷新指示器的样式,或者添加额外的回调函数,以便在刷新前后执行特定操作...
一个简单的回顶部按钮可以是一个`<button>`或`<a>`标签,放在页面底部或者侧边栏。例如: ```html 回到顶部 ``` 这里的`#top`是一个锚点,用于链接到页面顶部。`id="back-to-top"`是为了方便后续的CSS和JavaScript...
这个"原生JS实现的平滑返回顶部特效源码.zip"文件包含了一个使用JavaScript(尤其是原生JS,即非jQuery等库)编写的实现该功能的代码示例。以下是对这个知识点的详细说明: 首先,平滑返回顶部特效的核心在于模拟...
原生JavaScript实现平滑回到顶部组件是一个常见的网页交互功能,主要目的是提高用户的浏览体验。当用户在长页面中滚动一定距离后,为了方便快速回到页面顶部,会显示一个返回顶部的按钮。这篇文章将探讨如何使用纯...
JavaScript原生代码实现滚动条是一种常见的前端开发技术,它允许开发者自定义浏览器的默认滚动行为,以创造出更个性化和交互性的用户体验。在本篇讨论中,我们将深入探讨如何使用JavaScript来实现这一功能,并通过...
本文提供了一个完整的解决方案,使用JS和CSS实现回到顶部按钮的功能,可以帮助开发者快速实现这个功能。 知识点: 1. 使用position:fixed属性来固定元素的位置。 2. 使用CSS3中的transition属性来添加渐变效果。 3...
除了使用jQuery实现回到顶部的功能外,还可以考虑使用原生JavaScript或Vue.js、React等现代前端框架来实现这一功能,这些框架提供了更多的灵活性和性能优化手段。 综上所述,“回到顶部代码”是一个简单但非常实用...
JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在创建交互式...通过学习这些原生JavaScript技巧,开发者可以更好地构建高效、可维护的小型JavaScript应用,无论是简单的交互还是复杂的功能,都能游刃有余。
本文将详细介绍使用原生JavaScript实现“回到顶部”的技术细节。 首先,关于锚点功能,它是HTML超链接的一部分,利用HTML的id属性可以在页面中创建一个锚点位置。用户可以通过点击一个链接,跳转到页面中指定id的...
用原生javascript写的固定导航、回到顶部、焦点图切换效果
在本项目中,我们将探讨如何使用原生JavaScript、HTML和CSS技术来实现京东首页的一些关键交互功能,包括搜索框、菜单栏的滑动弹回、倒计时、Banner动画以及页面缓慢返回顶部的效果。这些都是现代网页开发中常见的...
"回到顶部模块"是网站设计中的一个重要组成部分,它通常是一个小型的交互元素,允许用户通过单击或触摸轻松地将浏览窗口滚动回页面顶部。在网页内容丰富的网站中,这个功能尤其有用,因为它提升了用户体验,使得用户...
如果你需要兼容不支持jQuery的环境,可以使用原生JavaScript来实现相同的功能,但这将涉及到更复杂的事件处理和动画编写。 在压缩包中的"回到顶部"文件,很可能是包含了上述代码的HTML、CSS和JavaScript文件,你...
在网页设计中,"弹性返回顶部"功能是一个常见的交互元素,它允许用户在浏览页面时,轻松地将页面滚动回顶部。这个功能尤其在长页面中非常有用,减少了用户的滚动操作,提升了用户体验。本篇文章将深入探讨如何实现...