javascript - 使用 JS/JQ 在网站上滚动整页 - 希望在使用 Web 按钮时覆盖行为

Question

我使用了在这里找到的一些代码:scroll a full page height up or down with jQuery/Javascript来自答案 3 上的链接。通过将 DIV ID 设置为“page1”、“page2”等，它一次滚动一整页。

它工作正常，但“接管”所有滚动。我需要能够让用户按下 CTA 按钮，然后它会向下滚动 3 页。但它会向下滚动 3 页，然后向上滚动 2 页(因为这是“当前页 + 1”)。

这是强制整页滚动的代码:

var pages = 7;
var currentpage = 1;
if (document.location.hash) { currentpage = parseInt(document.location.hash.replace('#', '')); }

var nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; }
var prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; }

var animatingup = false;
var animatingdown = false;

jQuery(window).scroll(function(event) {

if (animatingup==true) { return; }
if (animatingdown==true) { return; }
nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; }
prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; }

if (animatingup == false) {
    if (jQuery(window).scrollTop()+jQuery(window).height()>=jQuery("#page"+(nextpage)).offset().top+50) {
        if (nextpage > currentpage) {
            var p2 = jQuery( "#page"+(nextpage) );
            var pageheight = p2.position().top;
            animatingdown = true;
            jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
            return;
        }
    }
}

if (animatingdown == false) {
    if (jQuery(window).scrollTop()<=jQuery("#page"+(currentpage)).offset().top-50) {
        if (prevpage < currentpage) {
            var p2 = jQuery( "#page"+(currentpage) );
            var pageheight = p2.position().top-jQuery(window).height();
            animatingup = true;
            jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = prevpage; animatingup = false; document.location.hash = currentpage;});
            return;
        }
    }
}
});

我想我可以强制页面/DIV ID 号改变:

jQuery('#ctabut').click(function(){
    currentpage = 6;
});

但它仍然滚动到 DIV ID“page7”，然后返回。关于a)滚动整页的更好方法，b)如何覆盖按钮单击时的滚动c)如何仅在主页(这是一个wordpress网站)上实现JS代码的任何想法 - 非常感谢。

这只是一个开发站点，因此无法指向它。我的代码技能非常有限 - 所以请随意跟我说话，就像我很简单一样:)

Answer 1

嗯，正如经常发生的那样，我求助于论坛，然后解决问题。

如果我用这个替换我的“按钮代码”jQuery:

jQuery('#ctabut').click(function(){
    var p2 = jQuery( "#page7" );
    var pageheight = p2.position().top;
    animatingup = true;
    jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = 7; animatingup = false; document.location.hash = 7;});
});

它正确设置所有变量并防止“反弹”。

我发布答案，以防像我这样的菜鸟想要创建自己的简单的“整页滚动器”，而不使用像 fullpage.js 这样的大型预制库