3

jquery または javascript の問題に苦しんでいます。

すでに煩わしいので、これについては複雑すぎると思うかもしれません。

したがって、私のマークアップ（簡略化）は次のようになります。

<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>

基本的にはコンテナだけです。

それぞれに異なるコンテンツとボタンが含まれています。

計画：

1) ボタンをクリックすると、ウィンドウは次のコンテナまでスクロールダウンします。

2) 最後のボタンは、最初のコンテナーに再びスクロールします。だから私はループが必要です。

3) コンテナーの数は、ページごとに異なる場合があります。

編集: 4) コンテナーは、常に互いに直接の兄弟であるとは限りません (以下のマークアップを参照)

問題：

スクロール効果のターゲットとして各コンテナーに一意の ID を与えることで、これを機能させることができました。

それに関する問題は、すぐに乱雑になることです。

どうにかして「クラス: コンテナーの次のオブジェクト」をターゲットにして、そこまでスクロールできませんか?

js または jquery が正しいアプローチであるかどうかはわかりません。両方に関する私の知識はやや限られています。

正しい方向へのプッシュに本当に感謝しています。

編集:コンテナーは、常に互いに直接の兄弟であるとは限りません。

<div class="row">
        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>
</div>        

        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>

<div class="row">
        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>
</div>
4

3 に答える 3

6

簡単な解決策:

次のコンテナを取得するには、 を使用してみてくださいnext()。

基本的に、<div>コンテナは互いに兄弟であるため.next()、1 つの div コンテナを呼び出すと次のコンテナが表示されます。

$(".button").on("click", function(e) {
    $(document).scrollTop($(this).parent().next().offset().top);
    // $(this).parent().next() // this is the next div container.
    return false; // prevent anchor
});

http://jsfiddle.net/Pm3cj/1/

を使用$(this)してリンク オブジェクトを取得し、リンク.parent()の親である を<div>取得.next()してから、次の兄弟を取得します (自動的にラップされるため、最後の兄弟<div>は最初の <div>!),.offset() to get its position relative to the page,.top`になります)。上の境界線に対して相対的に取得します。

次に$(document).scrollTop()、その場所までスクロールするだけです。

完全に一般的なソリューションの場合は、次を使用します。

$(".button").on("click", function(e) {
    container = $(this).parent();

    // if I am the last .container in my group...
    while (    document != container[0] // not reached root
            && container.find('~.container, ~:has(.container)').length == 0)
        container = container.parent(); // search siblings of parent instead

    nextdiv = container.nextAll('.container, :has(.container)').first();

    // no next .container found, go back to first container
    if (nextdiv.length==0) nextdiv = $(document).find('.container:first');

    $(document).scrollTop(nextdiv.offset().top);
    // $(this).parent().next() // this is the next div container.
    return false;
});

このコードは基本的container.find('~.container, ~:has(.container)')に、 を持っている、または . である兄弟を見つけるために使用します.container。何もない場合は、DOM ツリーを 1 ステップ上に移動します。

である、または を持つものを見つけた後.container、 でそれをつかみnextdiv = container.nextAll('.container, :has(.container)').first();ます。

最後に、何も見つからない場合は、 でチェックして、ページ全体nextdiv.length==0の最初のものを取得します。.container

次に、取得したものまでスクロールし.containerます。

http://jsfiddle.net/Pm3cj/3/

スクロールをアニメーション化するには、scrollTopプロパティをanimate関数に配置します。

// $(document).scrollTop(nextdiv.offset().top); // snaps to new scroll position
$('body').animate({scrollTop:nextdiv.offset().top},300); // animates scrolling

http://jsfiddle.net/Pm3cj/4/

于 2012-09-08T07:46:24.443 に答える
-2

これには JavaScript は必要ありません。HTML アンカーを使用できます。

<div class="container" id="first">
    My Content
<a href="#second" class="button">scroll down</a>
</div>


<div class="container" id="second">
    My Content
<a href="#third" class="button">scroll down</a>
</div>


<div class="container" id="third">
    My Content
<a href="#fourth" class="button">scroll down</a>
</div>


<div class="container" id="fourth">
    My Content
<a href="#first" class="button">scroll down</a>
</div>
于 2012-09-08T07:51:54.130 に答える
-2

あなたが望むものは、 と を介して簡単に達成できparent()ますchild()。

各ページのコンテナーの数が異なる場合は、コンテナーの識別 (用語かどうかはわかりません) を順番に開始する必要があります。何かのようなもの、class="container-1"

最後のボタンのクリック イベントは、次のようにする必要があります。

var num = $('div[class^="container-"]').filter(function() {
    return((" " + this.className + " ").match(/\scontainer-\d+\s/) != null);
});
num++;
var last_container = $(this).parent('.container' + num);
last_container .scrollTo();

次のボタンが何をすべきかを理解できると確信しています;）

于 2012-09-08T07:59:22.993 に答える