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滚动到顶部并滚动到下一部分

回答

相关问题