Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> back to top </title>
<style>
body{
height:1600px;
}
. top{
width:100%;
height:30px;
background:red;
}
#box {
width:100px;
height:30px;
Background:pink;
line-height:30px;
position:fixed; --note here to use fixed positioning.
top:90%;
right:40px;
Display:none; --Start by setting the button back to the top to hide the property, and when the visible area height is at a certain value from the top of the page (scrolltop), change the dispaly to make it appear.
Cursor:pointer;
}
</style>
<script>
Window.onload = function () {
var box = document.getElementById ("box");
var top = 0;
var timer;
Window.onscroll = function () {
top = Document.documentElement.scrollTop | | Document.body.scrollTop;
if (Top > 600) {
Box.style.display = "block";
}else{
Box.style.display = "None";
}
}
Box.onclick = function () {
Clearinterval (timer);
var sudu = 10;
Timer = setinterval (function () {
Console.log (top); -----> Note Test the top value to avoid the case where the timer is not cleared.
if (top <= 0) {
Clearinterval (timer);
}else{
Document.documentElement.scrollTop = Document.body.scrollTop = Top-sudu;
}
},10);
}
}
</script>
<body>
<div class= "Top" ></div>
<div id= "box" >
Point me back to the top of
</div>
</body>
JS to achieve a simple uniform speed back to the top of the page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
