Question

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

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

                         $('html, body').stop(true,true).animate({
                                 .....
                             }, 2000);
            });

Answer 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);
});

Answer 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);
});

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

2 个答案: