前端基于jQuery返回顶部功能代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Back to Top</title>
<style>
.content{
width: 100%;
height: 3000px;
background-color: black;
}
.scroll-up{
width: 70px;
height: 40px;
line-height: 40px;
background-color: red;
position: fixed;
bottom: 50px;
right: 100px;
z-index: 100;
text-align: center;
border-radius: 4px;
color: white;
text-decoration: none;
display: none;
}
.scroll-up:hover{
background-color: rgba(25,180,234,.9);
}
</style>
</head>
<body>
<div class="content"></div>
<a href="" class="scroll-up">Scroll</a>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$(".scroll-up").fadeIn(1000);
} else {
$(".scroll-up").fadeOut(1000);
}
});
$(".scroll-up").click(function() {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>
</body>
</html>