Currently, I am working on a single-page website that utilizes keyboard-controlled scrolling.
To achieve the desired scroll effect, I have developed a JavaScript function that animates divs.
Here is the JavaScript code:
var current_page = "#first";
function animateScroll(curr, des){
$(des).show();
$(des).css("position", "absolute");
$(des).css("z-index", "2");
$(curr).css("z-index", "1");
$(des).css("top", "100%");
$(des).animate({
top : "0px"
}, 800, function(){
$(curr).hide();
current_page = des;
});
}
$(document).on("keyup", function(e){
if(e.keyCode === 40){
animateScroll(current_page, "#" + $(current_page).next().attr("id"));
}
});
Below is the HTML structure:
<div id='why_am_i_moving'></div>
<div class='main' id='first'>press down key</div>
<div class='main' id='second'></div>
<div class='main' id='third'></div>
<div class='main' id='fourth'></div>
<div class='main' id='fifth'></div>
And here is the CSS styling:
body, html{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
div.main{
width: 100%;
height: 100%;
display: none;
background: white;
}
#first{
background: red;
display: block;
}
#second{
background: blue;
}
#third{
background: green;
}
#fourth{
background: yellow;
}
#why_am_i_moving{
position: absolute;
bottom: 0;
width: 200px;
height: 200px;
background: brown;
z-index: 3;
}
However, I encountered an issue where all elements on the page move slightly upward before the animation starts when using the down key trigger. This problem only occurs in Firefox (version 38.0.5).
If anyone has any insights into what might be causing this, I would greatly appreciate your help.
You can view the issue in action on this JSFiddle link.
Thank you for your assistance!