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>

編集：

フィードバックの後、私の意図を少し明確にしたかっただけです..

1.4.2 ではなく、最新バージョンの JQuery 1.8.3 を使用したいと考えています。しかし、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

iOS 5 ではいくつかの問題があったため、 htmland要素は使用しませんでした。bodyしたがって、この問題の回避策は次のようになります。

<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 に答える