返回顶部特效（立即中断）

来源：互联网发布：python 内存地址编辑：程序博客网时间：2024/06/01 08:50

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

div {

background-color:#7FFFD4;

height: 3000px;

width: 100%;

}

a {

-webkit-box-sizing: border-box;

display: none;

height: 50px;

width: 50px;

position: fixed;

right: 50px;

bottom: 50px;

color: #7FFFD4;

background-color: #FAEBD7;

text-align: center;

padding-top: 14px;

cursor: pointer;

}

</style>

window.onload = function() {

var timer;

// 计时器

var stop=true;

window.onscroll = function() {

var botton = document.getElementById("botton");

var canheght = document.documentElement.clientHeight;

var cantop = document.body.scrollTop;

if (canheght < cantop) {

botton.style.display = "block";

} else {

botton.style.display = "none";

}

if (!stop) {

clearInterval(timer);

}

stop=false;

}//这个判断用于确定滚动是否收到外力影响，timer计时器每次都能重新将stop重置为true

botton.onclick = function() {

timer = setInterval(function() {

var top = document.body.scrollTop;

var speed=top/5;

document.body.scrollTop = top-speed;

stop=true;

if (top == 0) {

clearInterval(timer);

}

}, 30);

}

</script>

</head>

<body>

</body>

</html>

0 0