按当前视口的高度向下滚动页面答案

【问题标题】：scroll down page by the height of current viewport按当前视口的高度向下滚动页面
【发布时间】：2021-05-17 15:31:57
【问题描述】：

我有一个页面，其中有一个固定位置的按钮，单击该按钮时应计算视口的高度，然后将页面向下滚动该高度。 IE。到下一个视口。当用户到达没有更多滚动空间时，我想隐藏此按钮。不知道怎么做，到目前为止我有这个：

$(document).on('click', '.next-viewport-down', function(event) {
  event.preventDefault();
  var viewportHeight = $(window).height();
  $('html, body').stop(true,true).animate({ ... }, 2000);
});

【问题讨论】：

标签： jquery scroll

【解决方案1】：

试试这个。

$(document).on('click', '.next-viewport-down', function(event){                        
    event.preventDefault();
    var viewportHeight = $(window).height();

    $('html, body').animate({
        scrollTop: viewportHeight,
        complete: function () {
            //Hide your button here
        }
    }, 2000);
});

【讨论】：

【解决方案2】：

您可以使用它来跟踪当前部分并继续：

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

【讨论】：