一段简单的网页返回顶部和返回底部代码（html+css+jquery）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部和底部示例</title>
<style>
body, html {
height: 2000px;
}
#back-to-top, #back-to-bottom {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
</style>
</head>
<body>
<div id="back-to-top">返回顶部</div>
<div id="back-to-bottom">返回底部</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(window).scroll(function() {
// 当滚动超过100px时显示返回顶部按钮
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
// 当滚动到底部时显示返回底部按钮
if($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#back-to-bottom').fadeIn();
} else {
$('#back-to-bottom').fadeOut();
}
});
// 点击返回顶部按钮
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop: 0}, 400);
});
// 点击返回底部按钮
$('#back-to-bottom').click(function() {
$('body,html').animate({scrollTop: $(document).height()}, 400);
});
</script>
</body>
</html>这段代码包含了返回顶部和底部的功能，当页面超过100px滚动时，显示返回顶部的按钮，如果滚动到页面底部，则显示返回底部的按钮。点击按钮会平滑滚动到页面顶部或底部。
评论已关闭