jQuery超出屏幕高度显示返回顶部_jq 返回顶部功能,按钮在滚动条感到一定高度再显示-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery返回顶部按钮</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
height: 2000px; /* 为了演示滚动效果 */
background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
padding: 20px;
}

.content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
margin-bottom: 20px;
color: #333;
}

p {
margin-bottom: 15px;
line-height: 1.6;
color: #555;
}

.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #333;
color: white;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.back-to-top:hover {
background-color: #555;
transform: translateY(-3px);
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}

.footer {
text-align: center;
margin-top: 50px;
padding: 20px;
color: #666;
}

.footer a {
color: #333;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div class="content">
<h1>jQuery返回顶部按钮示例</h1>
<p>这是一个演示页面，展示了如何使用jQuery创建一个在滚动超出屏幕高度时显示的"返回顶部"按钮。</p>
<p>向下滚动页面，当滚动超过一屏高度时，右下角会出现一个返回顶部的按钮。</p>
<p>点击该按钮可以平滑滚动回到页面顶部。</p>

<h2>页面内容</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
<p>Vestibulum auctor dapibus neque. Maecenas sed nisi in arcu semper venenatis. Fusce sagittis, lorem sit amet vehicula elementum, lorem ipsum venenatis ante, sit amet tempus dui mi quis ipsum. Praesent blandit, nisi a euismod semper, neque sapien vulputate dui, id pulvinar tortor erat id lectus. Proin vitae pretium elit.</p>
<p>Cras leo sem, egestas a accumsan ac, tincidunt ut odio. Integer at enim eros. Donec accumsan commodo odio, vitae tempor nulla ultrices eu. Donec vitae nisi non magna rhoncus malesuada. Mauris accum san arcu sit amet nibh ornare eu congue libero ultrices. Sed malesuada, enim eget pharetra ultrices, nisi orci facilisis leo, quis volutpat turpis felis at metus.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
</div>

<div class="footer">

<p>© 2023 jQuery返回顶部示例. 保留所有权利.</p>
</div>

<div class="back-to-top" title="返回顶部">↑</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 显示或隐藏返回顶部按钮
$(window).scroll(function() {
if ($(this).scrollTop() > $(window).height()) {
$('.back-to-top').addClass('show');
} else {
$('.back-to-top').removeClass('show');
}
});

// 点击返回顶部按钮
$('.back-to-top').click(function() {
$('html, body').animate({scrollTop: 0}, 800);
return false;
});
});
</script>
</body>
</html>