Question

见下面的问题答案：

问题

所以我在我的网页上有一个javascript来在div之间滚动，但我希望能改进它。它将类（.current）分配给任何具有类.section的div，并在单击按钮时向上或向下循环。由于.next()运算符不会在父元素和子元素之间移动，因此它还有一种用于进出页面顶部的hackish变通方法。我真的不想改变html的语义结构，这或多或少如下：

<header>HEADER</header>
<section id="about">ABOUT</section>
<section id="posts">
    <div class="top"></div>
    <div class="section">CONTENT</div>
    <div class="section">CONTENT</div>
    <div class="section">CONTENT</div>
    <div class="section">CONTENT</div>
    <div class="section">CONTENT</div>
</section>
<footer>FOOTER</footer>

首先，有什么办法可以让它更优雅吗？使用return;放弃第一个滚动的脚本似乎是一个糟糕的解决方案，但我想不出任何其他（并且它的工作原理）。

其次，此脚本目前不考虑使用按钮按而不是滚动的用户，因此如果用户向上滚过{}，向上按钮可以使页面向下滚动{1}}，反之亦然。有没有办法找出用户最顶层的div.current 可见，并在脚本执行之前为其分配div.section类？

变得简单，我在编码方面非常糟糕，这是我在做一些不仅仅是复制和粘贴的事情上的第一个真实镜头之一！

脚本如下：

.current

ANSWER

最终使用jQuery onScreen plugin和一些反复试验来实现。它可以在行动中看到here这段代码有效，但它并不漂亮，我相信它可以改进：

$('div.section').first().addClass('current');
$('a.scroll').on('click', function(e) {
    e.preventDefault();
        var top = $(this).offset();
        var height = $(window).height();
        var t = $(this).attr('id'),
        that = $(this);

       if (t === 'scrolldown' && top.top < height){        
           $('html, body').animate({scrollTop: $('.top').offset().top }, 'slow');
           return;
     } 
       if (t === 'scrolldown' && $('.current').next('div.section').length > 0) {
          var $next = $('.current').next('.section');

          $('.current').removeClass('current');     
          $next.addClass('current');
          $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');
     }
       if (t === 'scrollup' && $('.current').prev('div.top').length > 0){        
          $('html, body').animate({scrollTop: 0 }, 'slow');
          return;
     } 
       if (t === 'scrollup' && $('.current').prev('div.section').length > 0) {
          var $prev = $('.current').prev('.section');

          $('.current').removeClass('current');
          $prev.addClass('current');
          $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');
     }
});

使用jQuery更好地在div之间滚动

0 个答案: