I need a button.click to scroll horizontal to next element. I have two elements laid horizontal with flexbox.
$( document ).ready(function() {
$("#front-button").on("click", function() {
$("#page-2").css("display", "flex"); // (1)
var divPos = $("#page-2").offset().left; // (2)
$('body').animate({scrollLeft: divPos}, "slow");
});
});
html
<body id="main-wrap">
<header id="main-header"> ... </header>
<div id="body-wrap">
<section id="page-1>
...
</section>
<section id="page-2>
...
</section>
</div>
</body>
css
html,body {
font-family: "Sailec-Regular","Helvetica Neue",Helvetica,Arial;
box-sizing: border-box;
text-decoration: none;
min-height: 600px;
min-width: 100%;
font-weight: 400;
font-size: 100%;
background: rgb(253, 253, 253);
color: graytext;
margin: 0;
padding: 0;
overflow: auto;
}
*, *:before, *:after {
box-sizing: inherit;
}
:root {
--header-nav-ht: 10%;
--body-page-ht: 90% ;
}
/* ------------------------------------------------------------------ */
#main-wrap {
min-width: 100%;
height: 100%;
margin: 0 auto;
/*background-image: url("img/background-main.png");*/
/*background-color: rgb(253, 253, 253);
background-repeat: no-repeat;
background-size: cover;*/
}
#body-wrap {
min-width: 100%;
height: 90%;
display: flex;
}
#body-wrap > section {
height: 100%;
min-width: 100%;
}
- The second element is hidden by default (display: none), so I turn it on.
- Here goes the animate function I've found here on stack.
So the first goes smooth, and element appears, but it doesn't scroll. Do You see any mistake in the code?