<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.topBtn{
width: 50px;
height: 50px;
border: 1px solid #000;
box-shadow: 2px 2px 2px 2px #ccc;
text-align: center;
font-size: 40px;
line-height: 60px;
outline: 1px solid #000;
outline-offset: 0px;
position: fixed;
bottom: 100px;
right:100px;
transition: all 0.5s;
display: none;
}
.topBtn:hover{
outline-offset: 20px;
}
</style>
</head>
<body>
<div class="topBtn">
^
</div>
<script>
var topbtn;
var bool = false;
init()
function init(){
topbtn = document.querySelector('.topBtn');
topbtn.onclick = clickHandler;
window.onscroll = scrollHandler
setInterval( enterFrame,16)
}
function clickHandler(){
// console.log(111)
bool = true;
}
function scrollHandler(){
if(document.documentElement.scrollTop > document.documentElement.clientHeight){
topbtn.style.display = "block"
}else{
topbtn.style.display = "none"
}
}
function enterFrame(){
console.log(13123)
if( !bool ) return;
document.documentElement.scrollTop -= 100
if(document.documentElement.scrollTop === 0) bool = false
}
for(var i=0;i<10;i++){
ce('img',null,document.body,{
src:'../img/a.png'
})
}
function ce(type, style, parent, props) {
let elem = document.createElement(type)
for (let prop in style) {
elem.style[prop] = style[prop]
}
for (let prop in props) {
elem[prop] = props[prop]
}
if (parent) parent.appendChild(elem)
return elem
}
</script>
</body>
</html>
点击按钮置顶案例
最新推荐文章于 2024-04-15 00:49:07 发布