我有几个div,都有相同的类(帖子),我有一个简单的导航,上面有UP和DOWN。
<nav>
<a href="" id="down">Down</a>
<a href="" id="up">Up</a>
</nav>
<div class="post one">Lorem ipsum dolor sit amet.</div>
<div class="post two">Lorem ipsum dolor sit amet.</div>
<div class="post three">Lorem ipsum dolor sit amet.</div>
每次用户单击向下时,我都想一次向下滚动一个div。每次用户单击向上时,我都想一次向上移动一个div。
我几乎得到了它,但是如果您向下单击两次,然后想再次向上两次,则滚动条卡在中间,则会出现一些错误。此外,如果您在最底部并且再次单击"向下",则它从顶部开始。此外,如果您向上单击一个向下,则滚动它不会遵循应有的逻辑。
请在这里看到它:http://jsfiddle.net/grovve/bs6443y4/
我假设它与我的变量"$currentElement"有关,并且在给定时间这个变量的值到底是多少,对吗?我到底缺少什么才能让它正常工作?
你收到错误的原因很简单——如果你在列表的底部(即最后一个元素),$currentElement.next()
什么都不会返回。当你处于顶端时,也会发生类似的事情。因此,您应该使用 if
来检查触发的单击处理程序是否存在下一个或上一个元素。我们可以使用.length
来评估这种情况。
同时,您可能希望在实际向队列添加另一个动画之前查看使用.stop()
。如果你不使用它,你最终会在每次鼠标点击时向jQuery动画队列添加太多项目,这是我们不希望的 - 这可能会导致生涩的动画或需要很长时间才能完成的动画。因此,我们在每个动画前面调用.stop(true)
来清除整个队列。
最后,当我们使用 .prev()
和 .next()
遍历 DOM 时,我们接受所有元素 — 所以我们应该包含选择器,即 分别.prev('.post')
和.next('.post')
以实现所需的行为。
var $currentElement = $(".post").first();
$("#down").click(function () {
var $nextElement = $currentElement.next('.post');
// Check if next element actually exists
if($nextElement.length) {
// If yes, update:
// 1. $currentElement
// 2. Scroll position
$currentElement = $nextElement;
$('html, body').stop(true).animate({
scrollTop: $nextElement.offset().top
}, 1000);
}
return false;
});
$("#up").click(function () {
var $prevElement = $currentElement.prev('.post');
// Check if previous element actually exists
if($prevElement.length) {
// If yes, update:
// 1. $currentElement
// 2. Scroll position
$currentElement = $prevElement;
$('html, body').stop(true).animate({
scrollTop: $prevElement.offset().top
}, 1000);
}
return false;
});
在此处查看更新和工作的小提琴:http://jsfiddle.net/teddyrised/bs6443y4/7/
函数中的注释。您在那里使用了变量,因此您在错误的范围内。
var $currentElement = $(".post").first();
$("#down").click(function () {
$currentElement = $currentElement.next();
$('html, body').animate({
scrollTop: $currentElement.offset().top
}, 1000);
return false;
});
$("#up").click(function () {
/* here's your problem! the var tells js to only use currentElement in this function not globally, the variable on the first line isn't overwritten!
var currentElement = $currentElement.prev();
to fix it simply remove the var! */
$currentElement = $currentElement.prev();
$('html, body').animate({
scrollTop: $currentElement.offset().top
}, 1000);
return false;
});
下到上包装帖子,试试从Terry的答案分叉的代码:
var $currentElement = $(".post").first();
$("#down").click(function () {
var currentElement = $currentElement.next(".post");
// Check if next element actually exists
if(currentElement.length) {
// If yes, update:
// 1. $currentElement
// 2. Scroll position
$currentElement = currentElement;
} else {
$currentElement = currentElement = $(".post").first();
}
$('html, body').stop(true).animate({
scrollTop: $(currentElement).offset().top
}, 1000);
return false;
});
$("#up").click(function () {
var currentElement = $currentElement.prev(".post");
// Check if previous element actually exists
if(currentElement.length) {
// If yes, update:
// 1. $currentElement
// 2. Scroll position
$currentElement = currentElement;
} else {
$currentElement = currentElement = $(".post").last();
}
$('html, body').stop(true).animate({
scrollTop: $(currentElement).offset().top
}, 1000);
return false;
});
在此处查看演示:http://jsfiddle.net/bs6443y4/8/