小火箭回到顶部

最新推荐文章于 2020-06-02 14:39:27 发布

weixin_33885253

最新推荐文章于 2020-06-02 14:39:27 发布

阅读量164

点赞数

原文链接：http://blog.51cto.com/xcxinghai/1285942

版权

在木蚂蚁（http://www.mumayi.com/）页面的右下角有个小火箭，点击之后，可以回到页面的顶部，而且还有火箭的动态的效果。

于是将木蚂蚁的页面另存为下来，研究是怎么用js和css实现的。自己将页面中的其他元素删除掉，只留下最简洁的demo页面。

Demo的目结构是：

index.html的代码是：

请点击小火箭回到顶部

实现这个小火箭的功能需要用到一个css样式，和两个js文件还有一张图片。

这个demo支持IE8、chrome、firefox三大主流浏览器。

下载地址

演示地址

原创文章，转载请注明： 转载自成长的企鹅

本文链接地址：小火箭回到顶部

关于我：成长的企鹅简介

转载于:https://blog.51cto.com/xcxinghai/1285942

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33885253

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

小火箭返回顶部

小欠的博客

03-02

494

当页面高度超过屏幕高度时，给页面右下角添加一个固定定位的小火箭图片，当页面向下滚动超出一定高度时，小火箭出现（否则隐藏），点击小火箭即可回到页面顶部

返回顶部小火箭

一笑的博客

10-18

1129

利用window.scrollTo(x,y) 把内容滚动到指定坐标<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .top{ position: fixed; right: 50px;

参与评论您还未登录，请先登录后发表或查看评论

返回顶部小火箭（仿电脑管家）

weixin_30387663的博客

11-20

326

偶然得到一张图片素材，想要实现返回顶部的小火箭效果。素材：实现思路一张图片上有多张图片的不同运动状态，可以用偏移来拼接动画运动状态，图片中含有动画的好几帧，想要让小火箭的火苗动起来，可以分别设置几种状态，在设置不同的偏移即可完成。难点就在如何连贯起来：可以采用一个计时器来完成，时间间隔需要设置的很短。实现过程  <div id="rocket...

小火箭回到顶部demo页面

06-14

小火箭回到顶部，木蚂蚁的首页的右下角的小火箭的实现的demo。欢迎大家下载学习。

js---小火箭回到顶部

anyi44365240的博客

08-29

525

比较粗糙，能到到效果，点击小火箭回到顶部，期间有小火箭的特效，用到了css3的动画，JS的滚动事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...

jquery小火箭返回顶部代码分享

10-23

本篇文章将详细介绍如何利用 jQuery 实现一个具有平滑滚动效果的小火箭返回顶部特效。首先，我们需要在 HTML 文件中引入必需的 CSS 和 JavaScript 文件。在 `<head>` 标签内，添加 jQuery 库的链接（这里使用的是 ...

jQuery实现小火箭返回顶部特效

11-20

点击后，使用`$("html,body").stop().animate({ scrollTop: 0 }, 1000)`将页面平滑滚动回顶部，其中`animate()`函数用于创建平滑动画，`scrollTop: 0`表示滚动到顶部，`1000`是动画执行的时间（单位为毫秒）。...

jQuery小火箭返回顶部

qq_39369835的博客

02-19

247

jQuery小火箭返回顶部： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height:

自定义返回顶部小火箭

喜欢前端的后端 MelodyJerry

06-02

1848

<style> #back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99; } #back-top span { width: 50px; height: 64px; display: block; background:url(http://images.cnblogs.com/cnblogs

关于小火箭返回顶部案例

dengli3463的博客

06-16

253

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 8000px; } a { color: #...

案例之小火箭返回顶部

初阶农民工的博客

08-19

1915

效果:页面文档有滚动条，当移动滚轮时，右下角显示小火箭，点击小火箭可返回顶部思路：当window触发onscroll事件时，得到scrollTop值作为减速运动初始值;当小火箭触发onclick事件时，做减速运动返回顶部关键知识：onscroll，setInterval，scrollTo 具体代码： <!DOCTYPE html> <html> <head...

回到顶部火箭demo

huangbaokang的博客

10-09

657

前台页面代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="jquery

博客园美化小火箭

aiyulove201314的博客

08-30

423

博客园美化小火箭一.代码  <script src="https://blog-static.cnblogs.com/files/pythonywy/jQuery1.7.js"></script> <style type="text/css"> /*回到顶部*/ #rocket-to-top d...

给你的博客园增加背景，头像和top小火箭

07-14

272

个人头像在博客侧边公告栏处添加下列代码 <img src="https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_gz.jpg" alt="果咩的头像" class="img_avatar" width="250px" style="border-radius:50%"> 背景在页面...

博客园美化

weixin_30629977的博客

07-28

101

这个博客已经申请快四年了，却一直没有好好利用，悔啊。不过话又说回来，从现在开始行动起来，无悔。此篇博文权当是正式入博的一种仪式、一道开胃菜、一次练手、一场前戏、、、、、、whatever 我应该是属于外貌协会中偏理性的一类人，对于自己博客界面当然也不会例外，谁不喜欢嫩嘟嘟水灵灵的皮肤呢，一款好的样式更能激起我阅读更新博客的兴趣，这种来自于外在的客观刺激是不容小觑的。博客园除了可以...

返回顶部酷炫小火箭发射代码

oldmonk

05-31

2659

很酷炫哦，直接粘贴即可 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtm...

jQuery实现小火箭动态返回顶部代码

不自律不成魔静心精进

06-10

232

HTML部分方法一：写在body里面 <div style="display:none;" id="rocket-to-top"> <div style="opacity:0;display:block;" class="level-2"></div> <div class="level-3"></div> &l...