Mixing
Reverse page scroll not scrolling to previous page
Aim: To get full page front and reverse scroll without using any plugins.
What I tried: Please click on this JSFiddle link for my code
Problem I am facing: Front scroll (from top to bottom) is working fine as you can check in the fiddle. But reverse scroll(when we go back to each div from bottom to top) is causing issues. Its hanging between two divs. I have commented out the piece of code in fiddle and Here is the code I tried to get reverse scroll:
if ((scrollPosition < lastScroll) && ($("#"+prevDiv).isOnScreen()) === true) {
console.log("prev div in view");
$('html,body').animate({
scrollTop: $("#"+prevDiv).offset().top
},'slow');
$("#"+prevDiv).addClass("active");
$("#"+currentDiv).removeClass("active");
currentDiv = $("#"+prevDiv);
return false;
}
javascript jquery css onepage-scroll
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
add a comment |
Aim: To get full page front and reverse scroll without using any plugins.
What I tried: Please click on this JSFiddle link for my code
Problem I am facing: Front scroll (from top to bottom) is working fine as you can check in the fiddle. But reverse scroll(when we go back to each div from bottom to top) is causing issues. Its hanging between two divs. I have commented out the piece of code in fiddle and Here is the code I tried to get reverse scroll:
if ((scrollPosition < lastScroll) && ($("#"+prevDiv).isOnScreen()) === true) {
console.log("prev div in view");
$('html,body').animate({
scrollTop: $("#"+prevDiv).offset().top
},'slow');
$("#"+prevDiv).addClass("active");
$("#"+currentDiv).removeClass("active");
currentDiv = $("#"+prevDiv);
return false;
}
javascript jquery css onepage-scroll
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
I doubt there is a problem in your " if ". Try changing it.
– WC2
Nov 21 '18 at 6:57
I tried using console to debug the code. Its entering the loop correctly. But active state is not updating correctly on divs. Request you to guide me through the error, you feel is causing this issue.
– AKNair
Nov 21 '18 at 7:22
add a comment |
Aim: To get full page front and reverse scroll without using any plugins.
What I tried: Please click on this JSFiddle link for my code
Problem I am facing: Front scroll (from top to bottom) is working fine as you can check in the fiddle. But reverse scroll(when we go back to each div from bottom to top) is causing issues. Its hanging between two divs. I have commented out the piece of code in fiddle and Here is the code I tried to get reverse scroll:
if ((scrollPosition < lastScroll) && ($("#"+prevDiv).isOnScreen()) === true) {
console.log("prev div in view");
$('html,body').animate({
scrollTop: $("#"+prevDiv).offset().top
},'slow');
$("#"+prevDiv).addClass("active");
$("#"+currentDiv).removeClass("active");
currentDiv = $("#"+prevDiv);
return false;
}
javascript jquery css onepage-scroll
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
Aim: To get full page front and reverse scroll without using any plugins.
What I tried: Please click on this JSFiddle link for my code
Problem I am facing: Front scroll (from top to bottom) is working fine as you can check in the fiddle. But reverse scroll(when we go back to each div from bottom to top) is causing issues. Its hanging between two divs. I have commented out the piece of code in fiddle and Here is the code I tried to get reverse scroll:
if ((scrollPosition < lastScroll) && ($("#"+prevDiv).isOnScreen()) === true) {
console.log("prev div in view");
$('html,body').animate({
scrollTop: $("#"+prevDiv).offset().top
},'slow');
$("#"+prevDiv).addClass("active");
$("#"+currentDiv).removeClass("active");
currentDiv = $("#"+prevDiv);
return false;
}
javascript jquery css onepage-scroll
javascript jquery css onepage-scroll
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
asked Nov 21 '18 at 6:15
AKNairAKNair
440412
440412
I doubt there is a problem in your " if ". Try changing it.
– WC2
Nov 21 '18 at 6:57
I tried using console to debug the code. Its entering the loop correctly. But active state is not updating correctly on divs. Request you to guide me through the error, you feel is causing this issue.
– AKNair
Nov 21 '18 at 7:22
add a comment |
I doubt there is a problem in your " if ". Try changing it.
– WC2
Nov 21 '18 at 6:57
I tried using console to debug the code. Its entering the loop correctly. But active state is not updating correctly on divs. Request you to guide me through the error, you feel is causing this issue.
– AKNair
Nov 21 '18 at 7:22
I doubt there is a problem in your " if ". Try changing it.
– WC2
Nov 21 '18 at 6:57
I doubt there is a problem in your " if ". Try changing it.
– WC2
Nov 21 '18 at 6:57
I tried using console to debug the code. Its entering the loop correctly. But active state is not updating correctly on divs. Request you to guide me through the error, you feel is causing this issue.
– AKNair
Nov 21 '18 at 7:22
I tried using console to debug the code. Its entering the loop correctly. But active state is not updating correctly on divs. Request you to guide me through the error, you feel is causing this issue.
– AKNair
Nov 21 '18 at 7:22
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406226%2freverse-page-scroll-not-scrolling-to-previous-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406226%2freverse-page-scroll-not-scrolling-to-previous-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I doubt there is a problem in your " if ". Try changing it.
– WC2
Nov 21 '18 at 6:57
I tried using console to debug the code. Its entering the loop correctly. But active state is not updating correctly on divs. Request you to guide me through the error, you feel is causing this issue.
– AKNair
Nov 21 '18 at 7:22