jQuery滾動到下一個/上一個div

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時，單擊時使用class =“ post”的scrollTo #next或#prev似乎不起作用。 當我使用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') 。 它既是html ，也是IE兼容性的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滾動到下一個/上一個div

問題描述

1 個解決方案

解決方案1
1 2013-01-06 22:21:05

jQuery滾動到下一個/上一個div

問題描述

1 個解決方案

解決方案1 1 2013-01-06 22:21:05

解決方案1
1 2013-01-06 22:21:05