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

有关答案，请参见以下问题：

问题:

因此，我的网页上有一个javascript，可以在div之间滚动，但我希望改进它。它将class.current分配给任何具有class.section的div，并在单击按钮时向上或向下循环。由于.next操作符不会在父元素和子元素之间移动，因此它还有一种从页面顶部到页面顶部的黑客解决方法。我并不想改变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>

答复

这最终是通过使用和一些尝试和错误来实现的。这段代码可以在实际操作中看到，但它并不漂亮，我相信它可以改进：

// onScreen jQuery plugin v0.2.1
// (c) 2011-2013 Ben Pickles
//
// http://benpickles.github.io/onScreen
//
// Released under MIT license.
(function(a){a.expr[":"].onScreen=function(b){var c=a(window),d=c.scrollTop(),e=c.height(),f=d+e,g=a(b),h=g.offset().top,i=g.height(),j=h+i;return h>=d&&h<f||j>d&&j<=f||i>e&&h<=d&&j>=f}})(jQuery);

// My Code
$('div.section').first().addClass('current');
$('a.scroll').on('click', function(e) {
    e.preventDefault();
    $('.current').removeClass('current');     
    $('.section').filter(':onScreen').first().addClass('current');

        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');
        return;

  }
    if (t === 'scrollup' && $('.current')[0].getBoundingClientRect().top < 0) {
        $('html, body').animate({scrollTop: $('.current').offset().top }, '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');
        return;
  }
    if (t === 'scrollup' && $('.current').prev('div.top').length > 0){        

        $('html, body').animate({scrollTop: 0 }, 'slow');
        return;
  } 
}); 

---

$function{在else条件下？从if中删除所有就绪-else@RohanKumar它们是干什么用的？谁知道我在想什么…谢谢。没错，没有人知道你在想什么，但这不是正确的使用方法。你到底想完成什么？只是在标题区域上滚动一圈？如果是这样，你应该在页面上修复它，让其余的人来做页面滚动的结果。@Malcoda如果帖子不清楚，很抱歉。我或多或少达到了我希望看到链接的结果，除了a我必须包括两个额外的if案例，以便从顶部向上和向下滚动，b当用户正常地向上或向下滚动页面时，脚本不知道这一点。这意味着向上和向下滚动在某些不理想的情况下，自己的按钮实际上可以将页面向相反的方向移动。我目前正在研究集成，但还不确定如何集成。

// onScreen jQuery plugin v0.2.1
// (c) 2011-2013 Ben Pickles
//
// http://benpickles.github.io/onScreen
//
// Released under MIT license.
(function(a){a.expr[":"].onScreen=function(b){var c=a(window),d=c.scrollTop(),e=c.height(),f=d+e,g=a(b),h=g.offset().top,i=g.height(),j=h+i;return h>=d&&h<f||j>d&&j<=f||i>e&&h<=d&&j>=f}})(jQuery);

// My Code
$('div.section').first().addClass('current');
$('a.scroll').on('click', function(e) {
    e.preventDefault();
    $('.current').removeClass('current');     
    $('.section').filter(':onScreen').first().addClass('current');

        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');
        return;

  }
    if (t === 'scrollup' && $('.current')[0].getBoundingClientRect().top < 0) {
        $('html, body').animate({scrollTop: $('.current').offset().top }, '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');
        return;
  }
    if (t === 'scrollup' && $('.current').prev('div.top').length > 0){        

        $('html, body').animate({scrollTop: 0 }, 'slow');
        return;
  } 
});