jQuery 滚动到顶部并滚动到下一部分

Question

I am trying to implement a position:fixed scroll-to-top button and another button that scrolls down the page section by section.我正在尝试实现一个 position:fixed scroll-to-top 按钮和另一个按部分向下滚动页面的按钮。 I have seen a similar code that is working with IDs, but I would like to use the classes of the sections and .next() .closest() to get this done.我看到了一个类似的代码，它使用 ID，但我想使用部分的类和 .next() .closest() 来完成这项工作。 Is this possible with jQuery?这可以用 jQuery 实现吗？ The scroll to top and scroll to the second section work, but I cannot get past the second section with .next() and .closest()滚动到顶部并滚动到第二部分工作，但我无法通过 .next() 和 .closest() 越过第二部分

This is my html:这是我的 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>

and this is the javascript:这是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);
  }) ;
});

Here is my fiddle: https://jsfiddle.net/pnemeth/uLrjdm7e/这是我的小提琴： https : //jsfiddle.net/pnemeth/uLrjdm7e/

Answer 1

I used a different approach than you are using, however it seems to get the job done.我使用的方法与您使用的方法不同，但是它似乎可以完成工作。

 $(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: This solution technically fulfills your requirements of using .closest() and .next(), but uses a position marker which is appended to the next section div after each button click.更新：此解决方案在技术上满足您使用 .closest() 和 .next() 的要求，但使用位置标记，在每次单击按钮后附加到下一部分 div。 When the user clicks the button to go back to top, the marker is appended to the first section 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 }); }); });

jQuery 滚动到顶部并滚动到下一部分

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-02-14 00:37:48

jQuery 滚动到顶部并滚动到下一部分

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-02-14 00:37:48

解决方案1
1 已采纳 2017-02-14 00:37:48