<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<title>Document
</title>
<style>
#
box {
position:
absolute;
width:
100
px;
height:
200
px;
right:
0;
background-color:
rgb
(
112
,
121
,
240
);
}
<
/style>
<script>
window
.
onload
=
function
()
{
var
oDiv
=
document
.
getElementById
(
'box'
);
var
top
=
document
.
body
.
scrollTop
||
document
.
documentElement
.
scrollTop
;
oDiv
.
style
.
top
=
parseInt
((
document
.
documentElement
.
clientHeight
-
oDiv
.
offsetHeight
)
/
2
)
+
top
+
'px'
;
}
window
.
onscroll
=
function
()
{
var
oDiv
=
document
.
getElementById
(
'box'
);
var
top
=
document
.
body
.
scrollTop
||
document
.
documentElement
.
scrollTop
;
console
.
log
(
top
);
startMove
(
parseInt
((
document
.
documentElement
.
clientHeight
-
oDiv
.
offsetHeight
)
/
2
)
+
top
)
}
var
timer
=
null
;
function
startMove
(
iTarget
)
{
var
oDiv
=
document
.
getElementById
(
'box'
);
clearInterval
(
timer
);
timer
=
setInterval
(
function
()
{
var
speed
=
(
iTarget
-
oDiv
.
offsetTop
)
/
15
;
speed
=
speed
>
0
?
Math
.
ceil
(
speed
)
:
Math
.
floor
(
speed
);
if
(
oDiv
.
offsetTop
==
iTarget
)
{
clearInterval
(
timer
);
}
else
{
oDiv
.
style
.
top
=
oDiv
.
offsetTop
+
speed
+
'px'
}
},
30
)
}
<
/script>
</head>
<body
style=
"height:2000px"
>
<div
id=
"box"
></div>
</body>
</html>