Little rocket back to top

There is a small rocket in the lower right corner of the wood ant http://www.mumayi.com/) page, after clicking, you can return to the top of the page, and there is a dynamic effect of the rocket.

650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1550232T0-0.png "real_src =" http://www.bkjia.com/uploads/allimg/131228/1550232T0-0.png "width =" 450 "height =" 276 "original =" http://www.bkjia.com/uploads/allimg/131228/1550232T0-0.png "name =" image_operate_617813778671_401 "title =" little rocket back to top "action -data = "plugin" action-type = "show-slide" style = "margin: 0px; padding: 0px; border: 0px; list-style: none; background-color: transparent; "/>

So I saved the wooden ant's page and studied how to implement it using js and css. Delete other elements from the page, leaving only the most concise demo page.

The Demo object structure is:

650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1550232346-2.png "real_src =" http://www.bkjia.com/uploads/allimg/131228/1550232346-2.png "width =" 579 "height =" 170 "original =" http://www.bkjia.com/uploads/allimg/131228/1550232346-2.png "name =" image_operate_7191377867471299 "title =" little rocket back to top "style = "margin: 0px; padding: 0px; border: 0px; list-style: none; background-color: transparent; "/>

The code for index.html is:

Please click the rocket back to the top

To implement this little rocket function, a css style is required, and two js files have an image.

This demo supports three mainstream browsers: IE8, chrome, and firefox.

Demo address

650) this. width = 650; "alt =" weixin "width =" 200 "height =" 200 "original =" http://www.bkjia.com/uploads/allimg/131228/1550235338-4.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1550235338-4.jpg "style =" margin: 0px; padding: 0px; border: 0px; font-size: 13.333104116211px; background-color: transparent; display: inline; background-position: initial; background-repeat: initial; "/>

Original article, reprinted Please note:Reprinted from the growth penguin

Link:Little rocket back to top

About me:Introduction to growth penguins