大家好,我遇到部分滚动问题。 我已经将此脚本用于部分滚动,并且效果很好:
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部分。