This article mainly introduces how to use javascript to implement the back-to-top button and source code in the lower-right corner of the blog garden page. it is very good. it is recommended to our friends for the cool back-to-top function.
Js core code
Window. onscroll = function () {var t = document.doc umentElement. scrollTop | document. body. scrollTop; var top_p = document. getElementById ("go"); if (t> = 300) {top_p.style.display = "block";} else {top_p.style.display = "none" ;}} var ptt = 20; function pageScroll () {document. getElementById ('flypig '). style. display = 'block'; window. scrollBy (0,-10); // each time it rises by 10px if (document. body. scrollTop = 0) {document. getElementById ('flypig '). style. marginBottom = ptt + 'px'; ptt = ptt + 10;} scrolldelay = setTimeout ('pagescroll () ', 2 ); // repeat once in 2 milliseconds if (ptt> = 1000) {ptt = 0; document. getElementById ('flypig '). style. marginBottom = 20 + 'px '; document. getElementById ('flypig '). style. display = 'none'; clearTimeout (scrolldelay);} // pageScroll ends}
Html
Return to the top button implementation
Script window. onscroll = function () {var t = document.doc umentElement. scrollTop | document. body. scrollTop; var top_p = document. getElementById ("go"); if (t> = 300) {top_p.style.display = "block";} else {top_p.style.display = "none" ;}} var ptt = 20; function pageScroll () {document. getElementById ('flypig '). style. display = 'block'; window. scrollBy (0,-10); // each time it rises by 10px if (document. body. scrollTop = 0) {document. getElementById ('flypig '). style. marginBottom = ptt + 'px'; ptt = ptt + 10;} scrolldelay = setTimeout ('pagescroll () ', 2 ); // repeat once in 2 milliseconds if (ptt> = 1000) {ptt = 0; document. getElementById ('flypig '). style. marginBottom = 20 + 'px '; document. getElementById ('flypig '). style. display = 'none'; clearTimeout (scrolldelay);} // pageScroll ends} script
Please go down
Back to top
The above is all the content of this article. I hope you will like it.