转自网路
原理：首先获取滚动条到页面顶部的距离，然后上移一定的距离，再获取滚动条到页面顶部的距离，再上移一定的距离（小于上一次上移的距离），以此类推：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>回到页面顶部</title>
<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>
</head>
<body>
<div style="height: 1500px;"></div>
<a href="#" onclick="goTop();return false;">返回到顶部</a>
</body>
</html>
分享到：
相关推荐
总结来说，实现JavaScript回到顶部功能的关键在于监听滚动事件、判断滚动位置以及响应点击事件。通过结合HTML、CSS和JavaScript，我们可以创建一个既实用又美观的"回到顶部"功能，提升用户的浏览体验。
以上就是使用JavaScript实现返回顶部功能的主要步骤和涉及的知识点。这个简单但实用的功能可以通过自定义CSS样式和JavaScript逻辑进行扩展，以适应不同网站的设计需求。通过阅读和理解上述代码，你可以创建自己的...
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户快速地将浏览焦点移回页面顶部，特别是在长页面...你可以参考这个案例，结合自己的需求进行修改和扩展，以实现符合自己网站风格的返回顶部功能。
5. **条件判断**：为了在页面滚动到底部或顶部时才显示返回顶部的按钮，需要通过JavaScript检查当前的滚动位置。例如，当滚动距离超过一定值时，显示按钮；当页面顶部可见时，隐藏按钮。 6. **事件处理**：当用户...
这可以通过JavaScript来实现，而本篇文章主要介绍了一种用JavaScript实现回到顶部效果的代码实现方法。以下是这篇文章中包含的知识点： 1. JavaScript实现回到顶部的基本原理： 实现回到顶部的效果，主要利用了...
在网页设计中，提供一个“返回顶部”的功能是非常实用且用户体验友好的设计。...通过理解并应用上述代码，你可以根据自己的需求创造出各种独特的返回顶部效果。记住，优化用户体验始终是网页设计的核心目标之一。
要实现这个炫酷的JavaScript返回顶部效果，我们可以遵循以下步骤： 1. **创建HTML元素**：首先，我们需要在页面的底部或侧边添加一个返回顶部的按钮。这通常是一个`<a>`标签，设置相应的CSS样式以使其在视觉上吸引...
在本案例中，我们关注的是一个特别的“回到顶部”实现，它带有页面上下弹动的动画效果。 这种弹动效果通常是通过JavaScript或者CSS3来实现的，增加了交互的趣味性与视觉吸引力。让我们详细探讨一下如何创建这样一个...
返回顶部 ``` 接下来，我们使用CSS来设置按钮的样式，使其在需要时显示或隐藏。可以添加以下样式： ```css #gotoTop { position: fixed; bottom: 20px; right: 20px; display: none; /* 初始状态隐藏 */ ...
在我们的回到顶部库中，它将用来检测当前页面的滚动位置，并决定何时显示或隐藏返回顶部的按钮。 二、创建HTML结构 首先，我们需要在页面底部添加一个"回到顶部"的按钮，通常是一个锚点（a标签）或者自定义的HTML...
总结一下，纯JavaScript实现“回到顶部”功能主要涉及以下几个步骤： 1. 创建并定位“回到顶部”按钮。 2. 监听滚动事件，当达到设定阈值时显示按钮。 3. 为按钮添加点击事件监听器，实现平滑滚动到顶部。 4. 监听...
本主题聚焦于一个特定的实现方式——"缓冲效果返回顶部"，这是一种更加平滑、优雅的滚动体验，而不是瞬间跳转到页面顶部。这种效果通常通过JavaScript实现，它可以模拟物体减速直至静止的过程，让页面滚动更加自然，...
现在，我们需要编写jQuery脚本来实现返回顶部的功能。在`js/gotoTop.js`中，我们监听滚动事件，当页面滚动到一定距离时显示按钮，点击按钮时则将页面滚动回顶部： ```javascript $(document).ready(function() { /...
为了缓解这一问题，我们可以利用JavaScript来创建一个“返回顶部”的按钮，方便用户快速回到页面的起始位置。以下是一个详细的实现步骤和相关知识点： 1. **HTML结构**： 首先，我们需要在页面中添加一个`<a>`标签...
本文将详细介绍如何使用jQuery实现平滑的返回顶部效果，并确保该功能在古老的Internet Explorer 6（简称IE6）上也能正常工作。 首先，我们需要引入jQuery库，因为这个功能是基于jQuery构建的。你可以通过以下代码将...
### JavaScript 实现返回顶部按钮知识点解析 #### 一、背景介绍 在现代Web开发中，随着网站内容的丰富，页面往往变得越来越长。为了提供更好的用户体验，很多网站都会添加一个“返回顶部”的功能，使用户可以快速...
3. **平滑滚动**：在`scrollToTop`函数内部，我们利用`window.scrollTo`方法配合动画效果实现平滑滚动至顶部。为了创建动画效果，可以使用`requestAnimationFrame`函数，每隔一定时间（比如16ms）更新滚动位置，直到...
这个功能也是通过JavaScript实现，通常会监听滚动事件，当用户滚动到一定距离时显示返回顶部按钮，再次点击则利用`window.scrollTo()`方法平滑滚动到页面顶部。为了增加用户体验，还会添加动画效果，使得页面滚动...
本资源提供的是一款基于jQuery实现的右下角浮动层火箭动画返回顶部效果代码，它将为你的网站增添一丝趣味性与互动性。 首先，jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互等...
总结一下，本文主要介绍了如何使用JavaScript实现页面“返回顶部”的功能，并提供了实现平滑滚动的代码示例。通过结合HTML、CSS和JavaScript，我们可以为用户提供更加友好的交互体验，使得页面的返回顶部操作既直观...