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>

，這是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); 
    }) ; 
});

這裏是我的小提琴： 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

嗯，我不知道。接下來和.closest是有關你的設計。我道歉。 – Inkdot

我相信問題是.closest（）方法找到DOM樹中最近的元素，而不是在窗口視圖中。我想唯一能避免使用'id標籤'的方法是編寫一個函數來計算與「x_position」類的每個元素相關的窗口位置，每次增加與窗口位置相比較的元素當你到達類「x_position」的元素。這將是更容易，並使用更少的代碼去'id標籤'路線。 – Inkdot

嗨Inkdot！感謝您的解決方案！你是對的，我以比它應該做的更復雜的方式開始。您的＃1解決方案正常工作。＃2還包括下一個（）和最接近的（），我認爲這是開始時的一個好主意，但現在我贊成你的第一個解決方案。 –

jQuery滾動到頂部並滾動到下一部分

回答

相關問題