Question

为什么这段代码（使用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时，单击时滚动#next或#prev与class =“post”似乎不起作用。当我使用1.4.2时它确实如此。我会接受全新代码的建议，但是我今天必须尝试过至少20个并且没有一个有效。至少这个工作...使用旧版本的JQuery ...这与我的新插件不兼容:(我是一个真正的新手。

基本上，当用户点击标题中的箭头时：http://thomasgrist.tumblr.com/他们应该在Tumblr .post的

中向上和向下滚动

Answer 1

$('#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')。 IE兼容性为html和body。

我没有使用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;
});

当然，您还需要在窗口上使用滚动事件监听器来检查视口中的哪个帖子，以便您可以向其中添加“活动”类。

JQuery scrollTo next / prev div

1 个答案: