在木蚂蚁（http://www.mumayi.com/）页面的右下角有个小火箭，点击之后，可以回到页面的顶部，而且还有火箭的动态的效果。
于是将木蚂蚁的页面另存为下来，研究是怎么用js和css实现的。自己将页面中的其他元素删除掉，只留下最简洁的demo页面。
Demo的目录结构是：
Index.html的代码是：
<!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="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/mybody.css" media="all" />
<script language="javascript" type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
</head>
<body>
<div id="scrollTop">
<div class="level-2"></div>
<div class="level-3"></div>
</div>
<script src="./js/script.js"></script>
<script type="text/javascript">
UI.global_search();
var uvOptions = {};
// !important
(function() {
initScrollTop();
})();
</script>
</body>
</html>
实现这个小火箭的功能需要用到一个css样式，和两个js文件还有一张图片。
这个demo支持IE8、chrome、firefox三大主流浏览器。
Demo的下载的地址：（ps：下载无需积分）
http://download.csdn.net/detail/xcxinghai/5579727
ps:我的新博客地址：http://www.xinghaixu.com
分享到：
相关推荐
这种设计常见于许多网站，特别是在用户滚动页面较长内容时，点击一个小火箭图标可以迅速将页面滚动回顶部，提升了用户体验。 首先，我们要理解这个“小火箭”实际上是一个UI元素，通常以动画形式出现。当用户滚动...
"jQuery小火箭返回顶部"是一种常见的网页交互设计，它允许用户快速将页面滚动回顶部，通常以一个醒目的图标（如火箭）的形式出现在页面底部，点击后页面会以动画效果迅速滚动到顶部。这个功能在长页面或者内容丰富的...
jQuery火箭回到星空顶部效果
jQuery可爱火箭回到顶部效果代码，当滑动网页到下面的时候，会出现小火箭，到顶部，小火箭消失，点击小火箭有个返回顶部的效果，一般我们在商城网站或者企业网站中经常用到这样的效果,php中文网推荐下载！
接下来，我们使用JavaScript来赋予火箭返回顶部的功能。在文档加载完成后，我们获取这个按钮元素，并添加点击事件监听器： ```javascript document.getElementById('rocket-top').addEventListener('click', ...
标题“回到顶部火箭特效”指的是在网页设计中一种常见的交互元素，它允许用户通过点击一个图标或按钮快速返回页面的顶部。这种效果通常被设计成火箭发射的形象，以增加用户体验的趣味性和互动性。火箭升空的动画效果...
这个"jquery小火箭返回顶部.rar"压缩包文件包含了一个使用JavaScript库jQuery实现的返回顶部效果，具体表现为一个动态的小火箭图标，当用户滚动页面时，该图标会出现在页面的某个角落，点击后页面瞬间回到顶部，给人...
当用户点击按钮时，页面应以平滑的方式滚动回顶部。这可以通过监听滚动事件和点击事件来实现。 ```javascript $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 100) { ...
在标题“回到顶部的小火箭Demo”中，提到的小火箭是一个形象化的图标，它代表了这个功能，给用户带来友好的视觉体验。 在无限下拉的异步加载模式下，页面内容随着用户的滚动不断加载，这种方式可以有效地减少页面...
jQuery可爱火箭回到顶部效果代码
当用户滚动页面至一定位置时，一个可爱的火箭图标会在页面底部或右下角出现，点击后火箭会沿着屏幕边缘向上加速“升空”，将页面瞬间拉回到顶部。这种设计不仅实用，还能增添网站的趣味性，提升用户体验。 实现这个...
在网页设计中，“返回顶部”功能是必不可少的，它帮助用户快速地从页面底部回到页面顶部，特别是在长页面中，节省了用户的滚动操作。这个特效不仅提供了基础的返回顶部功能，还引入了自定义速度的概念，这意味着...
"jQuery小火箭放回顶部"是一个常见的交互设计，它通常表现为一个小图标，隐藏在页面底部，当用户滚动页面时，图标会出现在屏幕边缘，点击后页面瞬间回到顶部，提供便捷的导航体验。本篇文章将详细介绍如何使用jQuery...
在这个特效中，可能有一个“返回顶部”的按钮，当用户滚动页面到一定位置时，火箭动画会触发，火箭升至页面顶部，同时也将页面滚动回顶部。这可以通过监听滚动事件、计算滚动位置，并触发相应的动画和页面滚动操作来...
**jQuery火箭点火升空返回顶部代码详解** 在网页设计中，为了提供用户友好的体验，经常需要在页面滚动到底部时提供一个便捷的方式让用户快速返回顶部。这就是所谓的"返回顶部"功能。在这个主题中，我们将深入探讨一...
本篇文章将详细介绍如何利用 jQuery 实现一个具有平滑滚动效果的小火箭返回顶部特效。 首先，我们需要在 HTML 文件中引入必需的 CSS 和 JavaScript 文件。在 `<head>` 标签内，添加 jQuery 库的链接（这里使用的是 ...
在返回顶部的功能中，我们将使用这个方法来确定页面是否已滚动，以及在用户点击火箭图标时将页面滚动回顶部。 3. `.animate()`: 这是jQuery的一个动画方法，可以平滑地改变CSS属性。用于返回顶部功能时，它可以使...