jQuery滚动元素示例

ziblog

已于 2025-06-27 15:03:23 修改

阅读量630

点赞数 19

CC 4.0 BY-SA版权

文章标签：前端

于 2025-05-13 15:48:38 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147926720

<!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>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
width: 80%;
margin: 0 auto;
}
.scroll-container {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
margin: 20px 0;
}
.scroll-content {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.scroll-item {
padding: 20px;
border-bottom: 1px solid #eee;
background-color: #f9f9f9;
}
.scroll-item:nth-child(even) {
background-color: #f0f0f0;
}
.scroll-buttons {
text-align: center;
margin: 20px 0;
}
.scroll-btn {
padding: 10px 20px;
margin: 0 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.scroll-btn:hover {
background-color: #45a049;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery滚动元素示例</h1>
<p>点击下方按钮可以滚动内容区域。</p>

<div class="scroll-buttons">
<button class="scroll-btn" id="scroll-up">向上滚动</button>
<button class="scroll-btn" id="scroll-down">向下滚动</button>
<button class="scroll-btn" id="scroll-to-top">滚动到顶部</button>
<button class="scroll-btn" id="scroll-to-bottom">滚动到底部</button>
</div>

<div class="scroll-container">
<div class="scroll-content" id="scroll-content">
<div class="scroll-item">项目 1 - 这是第一个滚动项目的内容</div>
<div class="scroll-item">项目 2 - 这是第二个滚动项目的内容</div>
<div class="scroll-item">项目 3 - 这是第三个滚动项目的内容</div>
<div class="scroll-item">项目 4 - 这是第四个滚动项目的内容</div>
<div class="scroll-item">项目 5 - 这是第五个滚动项目的内容</div>
<div class="scroll-item">项目 6 - 这是第六个滚动项目的内容</div>
<div class="scroll-item">项目 7 - 这是第七个滚动项目的内容</div>
<div class="scroll-item">项目 8 - 这是第八个滚动项目的内容</div>
<div class="scroll-item">项目 9 - 这是第九个滚动项目的内容</div>
<div class="scroll-item">项目 10 - 这是第十个滚动项目的内容</div>
<div class="scroll-item">项目 11 - 这是第十一个滚动项目的内容</div>
<div class="scroll-item">项目 12 - 这是第十二个滚动项目的内容</div>
<div class="scroll-item">项目 13 - 这是第十三个滚动项目的内容</div>
<div class="scroll-item">项目 14 - 这是第十四个滚动项目的内容</div>
<div class="scroll-item">项目 15 - 这是第十五个滚动项目的内容</div>
</div>
</div>

</div>

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

<script>
$(document).ready(function() {
// 获取相关元素
const $scrollContainer = $('.scroll-container');
const $scrollContent = $('#scroll-content');
const scrollHeight = $scrollContent.height();
const containerHeight = $scrollContainer.height();

// 初始位置
let currentPosition = 0;

// 向上滚动按钮
$('#scroll-up').click(function() {
// 如果已经在顶部，则不滚动
if (currentPosition >= 0) {
currentPosition = 0;
return;
}

currentPosition += 100; // 每次向上滚动100px
if (currentPosition > 0) currentPosition = 0;

$scrollContent.animate({
top: currentPosition + 'px'
}, 300);
});

// 向下滚动按钮
$('#scroll-down').click(function() {
// 计算最大可滚动距离
const maxScroll = containerHeight - scrollHeight;

// 如果已经在底部，则不滚动
if (currentPosition <= maxScroll) {
currentPosition = maxScroll;
return;
}

currentPosition -= 100; // 每次向下滚动100px
if (currentPosition < maxScroll) currentPosition = maxScroll;

$scrollContent.animate({
top: currentPosition + 'px'
}, 300);
});

// 滚动到顶部按钮
$('#scroll-to-top').click(function() {
currentPosition = 0;
$scrollContent.animate({
top: '0px'
}, 500);
});

// 滚动到底部按钮
$('#scroll-to-bottom').click(function() {
const maxScroll = containerHeight - scrollHeight;
currentPosition = maxScroll;
$scrollContent.animate({
top: maxScroll + 'px'
}, 500);
});

// 窗口大小改变时重新计算位置
$(window).resize(function() {
const newContainerHeight = $scrollContainer.height();
const newScrollHeight = $scrollContent.height();

// 如果内容高度小于容器高度，重置到顶部
if (newScrollHeight <= newContainerHeight) {
currentPosition = 0;
$scrollContent.css('top', '0px');
} else {
// 调整当前滚动位置，确保不会超出范围
const maxScroll = newContainerHeight - newScrollHeight;
if (currentPosition < maxScroll) {
currentPosition = maxScroll;
$scrollContent.css('top', maxScroll + 'px');
}
}
});
});
</script>
</body>
</html>