Javascript jQuery滚动到顶部并滚动到下一节_Javascript_Jquery_Html

Javascript jQuery滚动到顶部并滚动到下一节

javascript jquery html

Javascript jQuery滚动到顶部并滚动到下一节,javascript,jquery,html,Javascript,Jquery,Html,我试图实现一个位置：固定的滚动到顶部按钮和另一个按钮，滚动向下的页面一节一节。我已经看到了一个与IDs类似的代码，但是我想使用节的类和.next（）.closest（）来完成这项工作。使用jQuery可以做到这一点吗？滚动到顶部和滚动到第二部分可以工作，但我无法使用.next（）和.closest（）通过第二部分这是我的html： <body> <a href="#0" class="cd-top">Top</a> <a href="#2" clas

我试图实现一个位置：固定的滚动到顶部按钮和另一个按钮，滚动向下的页面一节一节。我已经看到了一个与IDs类似的代码，但是我想使用节的类和.next（）.closest（）来完成这项工作。使用jQuery可以做到这一点吗？滚动到顶部和滚动到第二部分可以工作，但我无法使用.next（）和.closest（）通过第二部分

这是我的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>

这是我的小提琴：

我使用的方法与您使用的方法不同，但它似乎可以完成工作

$（文档）.ready（函数（）{
//声明节计数，设置为0
变量计数=0，
节=$（“.x_节”），
$next=$（“.cd next”），
$top=$（“.cd-top”）；
$next.on（'click'，函数（事件）{
event.preventDefault（）；
//增量段计数
计数++；
$（“html，body”）.animate({
//滚动到区段计数
scrollTop:$（sections.get（count））.offset（）.top
});
});
$top.on（'click'，函数（事件）{
event.preventDefault（）；
//将节计数重置为0
计数=0；
$（“html，body”）.animate({
scrollTop:$（sections.get（0））.offset（）.top
});
});
});嗯，我没有意识到。下一个和。最近的与你的设计相关。我很抱歉。我认为问题在于.closest（）方法在DOM树中查找最近的元素，而不是在窗口视图中。我认为，在不使用“id标记”的情况下解决这个问题的唯一方法是编写一个函数来计算相对于类“x_position”的每个元素的窗口位置，每次到达类为“x_position”的元素时，都会增加与窗口位置相比较的元素。这将更容易，使用更少的代码去“id标签”路线。嗨，Inkdot！谢谢你的解决方案！你说得对，我是以一种比应该做的更复杂的方式开始这件事的。您的#1解决方案运行良好#2还包括next（）和nextest（），一开始我认为这是个好主意，但现在我支持你的第一个解决方案。
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);
  }) ;
});