Javascript return to the top of the button implementation method _ javascript skills

This article mainly introduces how to implement the buttons for returning javascript to the top. For more information, see the examples in this article to introduce how to implement the buttons for returning javascript to the top, the details are as follows:

Html:

Css:

#btn{position:fixed;display:none;}

Script:

Obtain the scroll bar height:Document.doc umentElement. scrollTop | document. body. scrollTop

Obtain the height of the visible area:Document.doc umentElement. clientHeight
Js Code

Window. onload = function () {var obtn = document. getElementById ('btn '); // obtain the height of the page visible area var clientHeight = document.doc umentElement. clientHeight; var timer = null; var isTop = true; window. onscroll = function () {var osTop = document.doc umentElement. scrollTop | document. body. scrollTop; if (osTop> = clientHeight) {// display button obtn. style. display = 'block';} else {// hide the button obtn. style. display = 'none';} if (! IsTop) {clearInterval (timer) ;}istop = false ;}; obtn. onclick = function () {// set timer = setInterval (function () {// obtain the height of the scroll bar from the top var osTop = document.doc umentElement. scrollTop | document. body. scrollTop; var ispeed = Math. floor (-osTop/6); document.doc umentElement. scrollTop = document. body. scrollTop = osTop + ispeed; isTop = true; if (osTop = 0) {clearInterval (timer) ;}, 30 );};};

I hope this article will help you learn about javascript programming.