有什么想法为什么这段代码(使用scrollTo插件)只适用于jquery-1.4.2.min.js以及如何更改它以便它适用于最新版本的JQuery？
http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery
谢谢:)
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {
function scroll(direction) {
var scroll, i,
positions = [],
here = $(window).scrollTop(),
collection = $('.post');
collection.each(function() {
positions.push(parseInt($(this).offset()['top'],10));
});
for(i = 0; i < positions.length; i++) {
if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
}
if (scroll) {
$.scrollTo(scroll, {
duration: 750
});
}
return false;
}
$("#next,#prev").click(function() {
return scroll($(this).attr('id'));
});
$(".scrolltoanchor").click(function() {
$.scrollTo($($(this).attr("href")), {
duration: 750
});
return false;
});
});
</script>
编辑:
只是想让我的意图在反馈后更加清晰..
我想使用最新版本的 JQuery 1.8.3，而不是 1.4.2。但是当我使用 1.8.3 时，单击时带有 class="post"的scrollTo #next 或 #prev 似乎不起作用。当我使用 1.4.2 时，确实如此。我愿意接受关于全新代码的建议，但是我今天至少尝试了 20 个代码，但没有一个起作用。至少这有效...使用旧版本的 JQuery...与我的新插件不兼容:(我是一个真正的新手。
基本上，当用户单击此处标题中的箭头时:http://thomasgrist.tumblr.com/他们应该上下滚动浏览 Tumblr .post 的
最佳答案
$('#container').animate({
scrollTop: <value>
}, 500);
您实际上并不需要该插件。您可以使用上面的代码片段滚动到偏移量。
编辑:
假设您有一个带有以下标记的菜单:
<ul class="menu">
<li><a href="#" data-for="section_2">Section 2</a></li>
<li><a href="#" data-for="section_3">Section 3</a></li>
<li class="last"><a href="#" data-for="section_4">Section 4</a></li>
</ul>
...那么 Javascript 代码将如下所示:
$('.menu li a').click(function() {
$('#container').animate({
scrollTop: $('.' + $(this).data('for')).position().top + $('#container').scrollTop()
}, 500);
return false;
});
如果您实际上滚动 body，则 $('#container') 变为 $('html, body') 。它同时是 html 和 body 以兼容 IE。
我没有使用 html 和 body 元素，因为在 iOS 5 上存在一些问题。因此，该问题的解决方法如下所示:
<body>
<div id="container">
rest of the page comes here
</div>
</body>
以及 CSS 代码:
#container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
}
所以在你的情况下，我假设你有一些像这样的标记:
<div id="container">
<div class="post active"></div>
<div class="post"></div>
<div class="post"></div>
<a id="next" href="#">Next</a>
</div>
还有一些 JS:
$('#next').click(function() {
$('#container').animate({
scrollTop: $('.post.active').next().position().top + $('#container').scrollTop()
}, 500);
$('.post.active').removeClass('active').next().addClass('active');
return false;
});
当然，您还需要窗口上的滚动事件监听器来检查视口(viewport)中的帖子，以便您可以向其添加“事件”类。
关于javascript - JQuery 滚动到下一个/上一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14187388/