jQuery上にスクロールして次のセクションにスクロール

固定スクロール・ツー・トップ・ボタンと、ページ・セクションをセクションごとにスクロールする別のボタンを実装しようとしています。私はIDで作業している同様のコードを見てきましたが、セクションと.next（）.closest（）のクラスを使用してこれを実行したいと考えています。これはjQueryでも可能ですか？）トップと第二のセクションの仕事にスクロールし、私は.next（と第二のセクションを乗り越えることができないためにスクロールして.closest（）jQuery上にスクロールして次のセクションにスクロール

これは私のhtmlです：

<body> 
<a href="#0" class="cd-top">Top</a> 
<a href="#2" class="cd-next">next</a> 
<div class="section"> 
    <section class="x_section"> 1</section> 
    <section class="x_section"> 2</section> 
    <section class="x_section"> 3</section> 
    <section class="x_section"> 4</section> 
</div> 
</body>

、これはありますジャバスクリプト：

jQuery(document).ready(function($){ 
    $next = $('.cd-next'), 
    $back_to_top = $('.cd-top'); 
    //smooth scroll to top 
    $back_to_top.on('click', function(event){ 
     event.preventDefault(); 
     $('html,body').animate({ scrollTop: 0 }, 700); 
    }); 

    $next.on('click', function(event){ 
     event.preventDefault(); 
     if (typeof advance == 'undefined') { 
      var fuller = $('section').closest('.x_section').next(), 
       section = $('.x_section').closest('.x_section').next(), 
       top0 = section.scrollTop(), 
       advance = fuller.offset().top; 
     } 
     else { var advance = advance + fuller.offset().top; } 
     $('html,body').animate({ scrollTop: top0 + 408 }, 700); 
    }) ; 
});

ここでは私のバイオリンです： https://jsfiddle.net/pnemeth/uLrjdm7e/

出典

2017-02-13 Peter Nemeth .malomsok.

私はあなたがUよりも異なるアプローチを使用しましたしかし、それは仕事を完了させるようです。

$(document).ready(function(){ 
 
    // declare section count, set to 0 
 
    var count = 0, 
 
    sections = $(".x_section"), 
 
    $next = $(".cd-next"), 
 
    $top = $(".cd-top"); 
 

 
    $next.on('click', function(event){ 
 
event.preventDefault(); 
 
// increment section count 
 
count++; 
 

 
$("html, body").animate({ 
 
     // scroll to section count 
 
     scrollTop: $(sections.get(count)).offset().top 
 
    }); 
 
    }); 
 
    
 
    $top.on('click', function(event) { 
 
     event.preventDefault(); 
 
     // reset section count to 0 
 
     count = 0; 
 
     $("html, body").animate({ 
 
     scrollTop: $(sections.get(0)).offset().top 
 
    }); 
 
    }); 
 
});

更新：このソリューションは、技術的に（.closestを使用しての要件を満たし）と.next（）が、各ボタンのクリック後、次のセクションのdiv要素に追加された位置マーカーを使用しています。ユーザーがボタンをクリックして先頭に戻ると、最初のセクションdivにマーカーが追加されます。

$(document).ready(function(){ 
 
    var $next = $(".cd-next"), 
 
    $top = $(".cd-top"); 
 

 
    $next.on('click', function(event){ 
 
event.preventDefault(); 
 
// get section closest to marker 
 
var section = $('#marker').closest('.x_section'), 
 
// get next section 
 
nextSection = section.next(); 
 
// remove marker 
 
section.find($('#marker')).remove(); 
 
// append new marker to next section 
 
$(section.next()).append('<div id="marker"></div>'); 
 

 
$("html, body").animate({ 
 
     scrollTop: $(nextSection).offset().top 
 
    }); 
 
    }); 
 
    
 
    $top.on('click', function(event) { 
 
     event.preventDefault(); 
 
     // append marker to first section 
 
     $(document).find($('#marker')).appendTo($('.x_section').get(0)); 
 
     
 
     $("html, body").animate({ 
 
      // scroll to first section 
 
     scrollTop: $($('.x_section').get(0)).offset().top 
 
    }); 
 
    }); 
 
});

出典

2017-02-14 00:37:48 Inkdot

うーん、私は.next実現しなかったと.closestは、デザインに関連しました。謝罪します。 – Inkdot

問題は、.closest（）メソッドがウィンドウツリービューではなく、DOMツリー内の最も近い要素を見つけることだと思います。私は 'idタグ'を使用せずにこれを回避する唯一の方法は、 "x_position"クラスの各要素に関連してウィンドウ位置を計算する関数を書くことで、ウィンドウの位置と比較している要素をインクリメントすることですクラス "x_position"を持つ要素に到達する時間。はるかに簡単で、「idタグ」ルートに行くコードを減らすことができます。 – Inkdot

こんにちはInkdot！ソリューションをありがとう！あなたが正しいです、私はこれをやるべきよりももっと複雑な方法で始めました。あなたの＃1のソリューションは正常に動作します。＃2にはnext（）とclosest（）も含まれていますが、最初は良いアイデアだと信じられていましたが、今私はあなたの最初の解決策に賛成です。 –

jQuery上にスクロールして次のセクションにスクロール

答えて

関連する問題