例如,我试图使一个滚动按钮,可以向下滚动多个div。
这是我的意思的一些示例代码。
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
我知道如何使按钮滚动,也只是一个div,但我不知道如何使按钮首先滚动到1,然后2,然后3等。
这是按钮的代码
<section id="scrolldownButton" class="button">
<a href=""><span></span>Scroll</a>
</section>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
试试看:
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<section id="scrolldownButton" class="button">
<a href=""><span></span>Scroll</a>
</section>
最佳答案
要实现这一点,您可以在当前active
元素上设置一个类,然后使用next()
查找要在下次单击按钮时滚动到的元素。一旦到达要滚动的元素的末尾,就可以返回到开头。注意,我在content
元素中添加了一个公共的div
类,使其更加可靠。试试这个:
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
var $target = $('.content.active').next('.content');
if ($target.length == 0)
$target = $('.content:first');
$('.active').removeClass('active');
$target.addClass('active');
$('html, body').animate({
scrollTop: $target.offset().top
}, 500, 'linear');
});
});
.content {
height: 250px;
}
#scrolldownButton {
position: fixed;
top: 20px;
right: 50px;
}
.active {
background-color: #EEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="content active">1</div>
<div id="2" class="content">2</div>
<div id="3" class="content">3</div>
<div id="4" class="content">4</div>
<div id="5" class="content">5</div>
<section id="scrolldownButton" class="button">
<a href="#">Scroll</a>
</section>