jQuery nach oben scrollen und blättern Sie zum nächsten Abschnitt

Ich versuche, eine Position zu implementieren: feste Spirale-to-Top-Taste und eine Schaltfläche, die durch den Abschnitt der Seite nach unten scrollt Abschnitt. Ich habe einen ähnlichen Code gesehen, der mit IDs arbeitet, aber ich würde gerne die Klassen der Sektionen und .next() .closes() verwenden, um dies zu erledigen. Ist das mit jQuery möglich? Die nach oben scrollen und auf den zweiten Abschnitt der Arbeit zu bewegen, aber ich kann nicht über den zweiten Abschnitt mit .next() erhalten und .closest()jQuery nach oben scrollen und blättern Sie zum nächsten Abschnitt

Das ist mein 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>

und das ist die javascript:

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); 
    }) ; 
});

Hier ist meine Geige: https://jsfiddle.net/pnemeth/uLrjdm7e/

Quelle

2017-02-13 Peter Nemeth .malomsok.

ich einen anderen Ansatz verwendet, als Sie u sind singen, aber es scheint die Arbeit erledigt zu haben.

$(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 
 
    }); 
 
    }); 
 
});

Update: Diese Lösung erfüllt technisch Ihre Anforderungen .closest mit() und .next(), verwendet aber eine Positionsmarkierung, die nach jedem Tastenklick in den nächsten Abschnitt div angehängt wird . Wenn der Benutzer auf die Schaltfläche klickt, um zum Anfang zurückzukehren, wird die Markierung an den ersten Abschnitt div angehängt.

$(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 
 
    }); 
 
    }); 
 
});

Quelle

2017-02-14 00:37:48 Inkdot

Hmm, ich war nicht klar, .next und .closest Ihrem Entwurf relevant waren. Ich entschuldige mich. – Inkdot

Ich glaube, das Problem ist, dass die .closes() -Methode das nächste Element in der DOM-Struktur findet, nicht in der Fensteransicht. Ich denke, der einzige Weg, um dies zu umgehen, ohne 'ID-Tags' zu verwenden, wäre eine Funktion zu schreiben, um die Fensterposition in Bezug auf jedes Element der Klasse "x_position" zu berechnen, inkrementieren das Element, das Sie vergleichen mit der Fensterposition Zeit erreichen Sie ein Element mit der Klasse "x_position". Es wäre viel einfacher und weniger Code verwenden, um die Route "ID-Tag" zu gehen. – Inkdot

Hallo Inkdot! Danke für die Lösung! Du hast recht, ich habe das komplizierter begonnen, als es sein sollte. Ihre # 1 Lösung funktioniert gut. # 2 beinhaltet auch next() und engste(), was ich am Anfang für eine gute Idee hielt, aber jetzt bin ich für deine erste Lösung. –

jQuery nach oben scrollen und blättern Sie zum nächsten Abschnitt

Antwort

Verwandte Themen