jQuery部分滚动-菜单单击功能

时间:2018-08-30 06:55:59

标签: jquery

大家好,我遇到部分滚动问题。 我已经将此脚本用于部分滚动,并且效果很好:

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

console.log(currentpage);

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

var animatingup = false;
var animatingdown = false;

$(document).ready(function() {
    resizeDiv();
    scrolltocurrent();
});

window.onresize = function(event) {
    resizeDiv();
    scrolltocurrent();
}

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

    if (animatingup==true) { console.log("animating up..."); return; }
    if (animatingdown==true) { console.log("animating down..."); return; }

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

    console.log("scroll happened, previous page is " + prevpage + ", current page is " + currentpage + ", next page is " + nextpage);

    //console.log($("#page"+(currentpage)).offset().top + " < " + $(window).scrollTop());

    //console.log($(window).scrollTop()+$(window).height() + " < " + $("#page"+(nextpage)).offset().top);

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

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

function resizeDiv() {
    vpw = $(window).outerWidth();
    vph = $(window).outerHeight();
    $('.page').css({'min-height': vph + 'px'});
}

它工作正常,但是我需要使用菜单进行页面滚动,这会导致问题。我在菜单中使用以下代码:

$(".anavwrap ul a").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();
if (document.location.hash) { currentpage = parseInt(document.location.hash.replace('#', '')); }

var nextpage = currentpage; 
if (nextpage > pages) { nextpage = pages; }

scrolltocurrent();

    });   

如何滚动到菜单锚点,当前将滚动+1或-1部分。

0 个答案:

没有答案