控制的js代码如下:
Home > Web Front-end > JS Tutorial > Code implementation of goTop to return to the top of the page controlled by js_javascript skills

Code implementation of goTop to return to the top of the page controlled by js_javascript skills

WBOY
Release: 2016-05-16 17:40:03
Original
1220 people have browsed it

Have you ever seen a lot of floating stuff with [Back to top] in the lower right corner of the page? It doesn't exist at the beginning. It appears as soon as you move the scroll bar, and disappears again when you return to the top.
Like:
Code implementation of goTop to return to the top of the page controlled by js_javascript skills
The js code controlled is as follows:

Copy code The code is as follows:

function goTop(){
var _btn = document.getElementById("goTop");
if (document.documentElement && document.documentElement.scrollTop) {
var _con = document.documentElement;
} else if (document.body) {
var _con = document.body;
}
window.onscroll = set;
_btn.style.left = document. documentElement.scrollWidth/2 500 "px";
_btn.onclick = function (){
_btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
_con.scrollTop -= Math.ceil(_con.scrollTop * 0.3);
if (_con.scrollTop == 0) clearInterval(_btn.timer, window.onscroll = set);
},10);
};
function set() {
_btn.style.display = _con.scrollTop ? 'block': "none";
}
} ;
document.write("");
window.onscroll = goTop;
Related labels:
top
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template