1

任何想法为什么此代码（使用 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 中上下滚动

4

1 回答 1

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

我没有使用htmlandbody元素，因为在 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;
});

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

于 2013-01-06T22:21:05.923 回答