具体效果就和本站一样
添加以下代码到网站中
<html>
<head>
..
<!-- 需要jQuery才能使用 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>
<!-- 还要添加样式 -->
<style>
..
/* 返回顶部 */
@media (max-width: 1000px) {
#back-to-top {
display: none !important;
}
}
#back-to-top {
cursor: pointer;
position: fixed;
right: 80px;
top: -800px;
z-index: 1;
width: 70px;
height: 800px;
background: url(img/top.png);
transition: all .8s ease-in-out;
opacity: 1;
}
</style>
</head>
<body>
..
<!-- 返回顶部 -->
<div id="back-to-top"></div>
<script>
$(function() {
$(window).scroll(function(){
if ($(window).scrollTop() > 500) {
$('#back-to-top').css('top', '-100px')
} else {
$('#back-to-top').css('top', '-800px')
}
})
$('#back-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 600)
})
})
</script>
</body>
</html>
最后添加一张图片到css对应的路径即可../img/top.png