jquery 向上连续滚动代码
时间: 2023-07-09 22:18:19 浏览: 162
您可以尝试以下代码实现jquery向上连续滚动:
HTML部分:
```
<div class="scroll">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
</ul>
</div>
```
CSS部分:
```
.scroll {
height: 100px;
overflow: hidden;
}
.scroll ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.scroll li {
height: 20px;
line-height: 20px;
}
```
JS部分:
```
$(document).ready(function() {
var scrollHeight = $('.scroll ul').height();
setInterval(function() {
$('.scroll ul').animate({marginTop: '-=20px'}, 600, function() {
if (Math.abs(parseInt($(this).css('marginTop'))) >= scrollHeight - 100) {
$(this).css('marginTop', 0);
}
});
}, 3000);
});
```
这段代码实现了每3秒钟向上滚动一次,每次滚动20px,当滚动到最后一条内容时回到第一条重新开始滚动。您可以根据需要进行调整。
阅读全文