Question

我有以下代码，onClick逐个向下滚动用户，直到底部：

var currentSection = 0;
var totalSections = document.querySelectorAll("section").length;
$(document).on('click', '.cd-go', function(event){                        
    event.preventDefault();
    var viewportHeight = $(window).height();
    currentSection++;
    if (currentSection > totalSections - 1) currentSection = totalSections - 1;
    $('html, body').animate({
        scrollTop: viewportHeight * currentSection
    }, 500);
});

这很好用，虽然我希望实现这样的功能：当用户向上滚动某处然后onClick时，它会向下滚动到下一个最近的部分而不是像当前那样到底部。

有关实现这一目标的任何建议吗？我目前无法进一步实施。

这是当前的小提琴：http://jsfiddle.net/cyt57dsj/43/

Answer 1

所以解决这个问题的方法是，每次单击下一个按钮时，都必须检查视口中的哪个部分。

基于此，您必须滚动到下一部分。

这是jQuery代码

var currentSection =    1;
var nextSection = 0

$(document).on('click', '.cd-go', function(event){  
        var sec = 1;
    event.preventDefault();
    $("section").each(function(){
        if($(this).inView()){
        currentSection = sec;
        console.log('currentSection =',currentSection);
      }else{
      sec++
      }
        });
    nextSection = currentSection+1;

    var os = $('#section'+nextSection).offset();

    $('html, body').animate({
    scrollTop: os.top,
    scrollLeft: os.left
});
});

$.fn.inView = function(){
   var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

如果这对你有用，请告诉我。这是fiddle

Answer 2

如果适合你，你可以这样做。

小提琴代码如下：http://jsfiddle.net/cyt57dsj/159/

var currentSection = 1;
var totalSections = $('.cd-section').length;
var currpos = $(window).scrollTop();

setInterval(scrolllistener, 1000);

function scrolllistener() {
    var testpos = $(window).scrollTop();
  // has scrolled
  if (testpos != currpos) {
    // scrolled down
    if (testpos > currpos) {scrolltosection(currentSection+1);}
    // scrolled up
    else {scrolltosection(currentSection-1);}
  }
}

function scrolltosection(number) {
    currentSection = number;
    $('html, body').animate({
    scrollTop: $('#section'+number).offset().top
  }, 300, function() { currpos = $(window).scrollTop(); });
  if (number < totalSections) {
    $('.cd-go').show();
  } else {
    $('.cd-go').hide();
  }

}

$('.cd-go').click(function() {
    var newnumber = currentSection+1;
  if (newnumber > totalSections) {}
  else {
        scrolltosection(newnumber);
  }
});

我没有更改您的HTML或CSS代码。我设置了一个检查滚动的间隔，它比.scroll（）事件监听器的资源密集程度低。

基本上它会查找您滚动到的最后一个部分编号，如果向上滚动，则发送到n-1和向下n + 1。它还会根据您在页面上的位置显示和隐藏按钮。

Answer 3

这很有效。只需在现有代码中添加each循环即可。单击时，它将在视口中显示第一个部分，并滚动到下一部分。

var currentSection = 1, totalSections = document.querySelectorAll("section").length;

$(document).on('click', '.cd-go', function(event){
    event.preventDefault();
    currentSection=1;
    $("section").each(function(){
        if(($(this).offset().top+$(this).outerHeight())>$(window).scrollTop())
        {
          currentSection=parseInt($(this).attr("id").replace("section",""));
            return false;
        }
    });
    currentSection++;
    if(currentSection>totalSections)
    {
        return;
    }
    $('html, body').animate({
        scrollTop: $("#section"+currentSection).offset().top
    }, 500);
});

.cd-go {
    width: 209px;
    background: rgba(0,0,0, 0.17);
    height: 212px;
    border-radius: 212px;
    color: #fff;
    position: fixed;
    bottom: -106px;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.w-sec {
  height:100vh;
}
.w-sec:first-of-type {
  background:#fff;
}
.w-sec:nth-of-type(2) {
  background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cd-go">
			DOWN
</a><!-- scroll btn -->

<section id="section1" class="w-sec cd-section">
	content
</section><!-- section 2 -->

<section id="section2" class="w-sec cd-section">
	content
</section><!-- section 2 -->

<section id="section3" class="w-sec cd-section">
	content
</section><!-- section 2 -->

Jquery动态地逐段向下滚动

3 个答案: