<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 50px;
}
body {
/*height:1000px;*/
}
div {
width: 500px;
height: 3000px;
background: pink;
margin: 20px auto;
/*padding: 100px;*/
border: 50px solid;
overflow: auto;
}
h1 {
height: 1000px;
background: blue;
}
button {
position: fixed;
right: 40px;
bottom: 100px;
}
</style>
</head>
<body>
<div>
<h1></h1>
</div>
<button>返回顶部</button>
<script>
var oDiv = document.querySelector("div");
var oBtn = document.querySelector("button");
console.log(window);
oBtn.onclick = function() {
// document.documentElement.scrollTop=100;
timer = setInterval("runToTop()", 0);
}
function runToTop() {
a1 = document.documentElement.scrollTop
if (a1 > 1000) {
a1 = a1 - 10;
window.scrollTo(0, a1);
}
if (a1 < 1000) {
a1 = a1 - 5;
window.scrollTo(0, a1);
}
if (a1 < 0) {
window.scrollTo(0, 0);
clearInterval(timer);
}
}
接上一个文章给动画加一个先快后慢的动作！
猜你喜欢
转载自blog.csdn.net/weixin_44081699/article/details/86062423
今日推荐
周排行