如何使用相同的 class 滚动到上一个 div
How to scroll to previous div with same class
我的页面很长,里面有很多 class 元素。还有 2 个按钮:next
和 prev
。
This script 滚动到下一个元素对我来说效果很好:
$('.button').click(function() {
var target;
$("p").each(function(i, element) {
target = $(element).offset().top;
if (target - 10 > $(document).scrollTop()) {
return false; // break
}
});
$("html, body").animate({
scrollTop: target
}, 700);
});
有人可以帮我 prev
解决方案吗?
这应该可行:
$(document).ready(function(){
$('.button.next').click(function() {
var target;
$("p").each(function(i, element) {
target = $(element).offset().top;
if (target - 10 > $(document).scrollTop()) {
return false; // break
}
});
$("html, body").animate({
scrollTop: target
}, 700);
});
$('.button.prev').click(function() {
var target;
$("p").each(function(i, element) {
current = $(element).offset().top;
if (current + 10 > $(document).scrollTop()) {
if (i == 0){
target = 0;
}
else {
target = $("p").eq(i-1).offset().top
}
return false; // break
}
});
$("html, body").animate({
scrollTop: target
}, 700);
});
});
p {
height:600px;
}
.button {
position:fixed;
cursor:pointer;
top:5%;
}
.next {
right:5%;
}
.prev {
right:15%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button prev">PREV</div>
<div class="button next">NEXT</div>
<h1>Welcome to My Homepage</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the last paragraph.</p>
我的页面很长,里面有很多 class 元素。还有 2 个按钮:next
和 prev
。
This script 滚动到下一个元素对我来说效果很好:
$('.button').click(function() {
var target;
$("p").each(function(i, element) {
target = $(element).offset().top;
if (target - 10 > $(document).scrollTop()) {
return false; // break
}
});
$("html, body").animate({
scrollTop: target
}, 700);
});
有人可以帮我 prev
解决方案吗?
这应该可行:
$(document).ready(function(){
$('.button.next').click(function() {
var target;
$("p").each(function(i, element) {
target = $(element).offset().top;
if (target - 10 > $(document).scrollTop()) {
return false; // break
}
});
$("html, body").animate({
scrollTop: target
}, 700);
});
$('.button.prev').click(function() {
var target;
$("p").each(function(i, element) {
current = $(element).offset().top;
if (current + 10 > $(document).scrollTop()) {
if (i == 0){
target = 0;
}
else {
target = $("p").eq(i-1).offset().top
}
return false; // break
}
});
$("html, body").animate({
scrollTop: target
}, 700);
});
});
p {
height:600px;
}
.button {
position:fixed;
cursor:pointer;
top:5%;
}
.next {
right:5%;
}
.prev {
right:15%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button prev">PREV</div>
<div class="button next">NEXT</div>
<h1>Welcome to My Homepage</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the last paragraph.</p>