Jquery滚动到next / prev div与同一个类
我有几个div，都有相同的类（post），我有一个简单的UP和DOWN导航。
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 每次用户点击Down时，我想要向下滚动一个div。 每次用户点击Up我都希望当时上一个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/
看看函数中的注释为up。 你在那里使用了var，因此你的范围是错误的。
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; });
如果你想要向上/向下从顶部到顶部包装post，试试这个代码从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/