If you have many divs inside the menu when you scroll down. Close the menu with dataOffcanvas.close(); and open it again with dataOffcanvas.open(); then it scrolls to the top of menu.
How can you make it stay there instead of scrolling to top??
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Accessible Offcanvas </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="publisher" href="https://plus.google.com/u/0/102875256234651427686/">
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "SoftwareSourceCode",
"name": "Accessible Offcanvas Plugin",
"url": "http://offcanvas.vasilis.co",
"description": "Accessible Offcanvas jQuery plugin, using ARIA.",
"keywords": "offcanvas, accesible, jquery plugin",
"codeRepository":"https://github.com/vmitsaras/js-offcanvas"
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400:500'>
<style type="text/css">
.c-offcanvas, .c-offcanvas-content-wrap {
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.c-offcanvas, .c-offcanvas-content-wrap, .c-offcanvas-bg.c-offcanvas-bg--reveal, .c-offcanvas-bg.c-offcanvas-bg--push {
transition: transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
}
.c-offcanvas.is-open {
transform: translate3d(0, 0, 0);
visibility: visible;
}
/**
* Offcanvas-content-wrap
*/
.c-offcanvas-content-wrap {
position: relative;
z-index: 3;
overflow: hidden;
}
/**
* Offcanvas Panel
*/
.c-offcanvas {
position: fixed;
min-height: 100%;
max-height: none;
top: 0;
display: block;
background: #fff;
overflow: auto;
}
.c-offcanvas--opening {
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.c-offcanvas.is-closed {
max-height: 100%;
overflow: hidden;
visibility: hidden;
box-shadow: none;
}
.c-offcanvas.is-scrollable {
overflow-y: auto;
}
.c-offcanvas--overlay {
z-index: 6;
}
.c-offcanvas--reveal {
z-index: 2;
}
/**
* Offcanvas BG-Overlay
*/
.c-offcanvas-bg {
position: fixed;
top: 0;
height: 100%;
width: 100%;
z-index: 5;
left: -100%;
background-color: transparent;
transition: background-color 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.c-offcanvas-bg.is-animating, .c-offcanvas-bg.is-open {
left: 0;
background-color: rgba(0, 0, 0, 0.68);
visibility: visible;
}
.c-offcanvas-bg.is-closed {
visibility: hidden;
}
/**
* Position Left
*
*/
.c-offcanvas--left {
height: 100%;
width: 17em;
transform: translate3d(-17em, 0, 0);
}
/**
* Position Right
*
*/
.c-offcanvas--right {
height: 100%;
width: 17em;
right: 0;
transform: translate3d(17em, 0, 0);
}
/**
* Position Top
*
*/
.c-offcanvas--top {
left: 0;
right: 0;
top: 0;
height: 12.5em;
min-height: auto;
width: 100%;
transform: translate3d(0, -12.5em, 0);
}
/**
* Position Bottom
*
*/
.c-offcanvas--bottom {
top: auto;
left: 0;
right: 0;
bottom: 0;
height: 12.5em;
min-height: auto;
width: 100%;
transform: translate3d(0, 12.5em, 0);
}
/**
* Reveal
*
*/
.c-offcanvas-content-wrap {
z-index: 3;
}
.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--right.is-open {
transform: translate3d(-17em, 0, 0);
}
.c-offcanvas--reveal {
z-index: 0;
transform: translate3d(0, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--right.is-open {
transform: translate3d(-17em, 0, 0);
}
/**
* Push
*
*/
.c-offcanvas--push {
z-index: 6;
}
.c-offcanvas--push--opening {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.c-offcanvas-content-wrap {
z-index: 3;
}
.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--right.is-open {
transform: translate3d(-17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--left.is-open {
transform: translate3d(17em, 0, 0);
}
.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--right.is-open {
transform: translate3d(-17em, 0, 0);
}
.u-unstyled, .o-list-inline {
margin: 0;
padding: 0;
list-style: none;
}
.u-pos-relative {
position: relative !important;
}
.u-hidden-visually {
position: absolute !important;
overflow: hidden !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}
.u-text-center {
text-align: center;
}
[tabindex="-1"]:focus {
outline: 0;
}
.o-list-inline {
padding: 0;
list-style: none;
}
.o-list-inline > li {
display: inline-block;
}
html {
overflow: hidden;
font-size: 1em;
font-family: "Roboto", sans-serif;
line-height: 1.5;
background-color: #fff;
color: #333;
overflow-y: scroll;
min-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
p {
font-size: 1.18em;
margin-bottom: 1.18em;
font-weight: 400;
font-style: normal;
color: #424242;
}
@media (min-width: 20em) and (max-width: 41.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
p {
font-size: 1.18em;
}
}
@media (min-width: 81.25em) {
p {
font-size: 1.18em;
}
}
h1 {
font-size: 1.6992em;
margin: 0 0 1em 0;
line-height: 1.1;
font-weight: 500;
font-style: normal;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h1 {
font-size: 1.6992em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h1 {
font-size: 2.15055em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h1 {
font-size: 2.3128em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h1 {
font-size: 2.655em;
}
}
@media (min-width: 81.25em) {
h1 {
font-size: 3.0208em;
}
}
h2 {
font-size: 1.416em;
line-height: 1em;
font-weight: 400;
font-style: normal;
padding: 0 0 0.45074em;
margin: 1.18em 0 1.18em 0;
text-transform: capitalize;
text-indent: -2px;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h2 {
font-size: 1.416em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h2 {
font-size: 1.593em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h2 {
font-size: 1.652em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h2 {
font-size: 1.77em;
}
}
@media (min-width: 81.25em) {
h2 {
font-size: 1.888em;
}
}
h3 {
font-size: 1.2em;
margin: 1.18em 0 0.7293em 0;
font-weight: 500;
font-style: normal;
line-height: 1.188em;
color: #2b2b2b;
text-indent: -1px;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h3 {
font-size: 1.2em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h3 {
font-size: 1.35em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h3 {
font-size: 1.4em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h3 {
font-size: 1.5em;
}
}
@media (min-width: 81.25em) {
h3 {
font-size: 1.6em;
}
}
h4 {
font-size: 1.18em;
font-weight: 300;
line-height: 1.409em;
margin: 1em 0 0 0;
letter-spacing: 1px;
color: #727272;
text-transform: uppercase;
}
@media (min-width: 20em) and (max-width: 41.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
h4 {
font-size: 1.18em;
}
}
@media (min-width: 81.25em) {
h4 {
font-size: 1.18em;
}
}
.l-wrapper {
max-width: 100%;
margin: 0 auto;
padding-right: 12px;
padding-left: 12px;
}
@media (min-width: 41.25em) {
.l-wrapper {
padding-right: 24px;
padding-left: 24px;
}
}
@media (min-width: 46.25em) {
.l-wrapper {
max-width: 34.2556em;
}
}
@media (min-width: 81.25em) {
.l-wrapper {
max-width: 46.97082em;
}
}
.c-button {
background: transparent;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.08));
background-color: #4e4e4e;
border-color: #4e4e4e;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font: inherit;
font-weight: 300;
margin: 0;
padding: 0.38198em 0.7293em;
margin: 0 0 0.38198em;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
overflow: hidden;
vertical-align: middle;
}
.c-button:hover, .c-button:focus {
color: #fafafa;
}
@media (min-width: 46.25em) {
.c-button {
font-size: 1.18em;
}
}
.c-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.c-button:hover,
.c-button:focus,
.c-button:active {
outline: 0;
text-decoration: none;
}
.c-button:focus:not(:hover) {
outline: 4px solid #c5dbfc;
}
.c-button--hard {
border-radius: 0;
}
.c-button--green {
color: #ffffff;
background-color: #8ecd73;
border-color: #8ecd73;
}
.c-button--green:hover, .c-button--green:focus, .c-button--green:active {
background-color: #9dd486;
border-color: #9dd486;
outline: none;
}
.c-button--blue {
color: #ffffff;
background-color: #378bb5;
border-color: #378bb5;
}
.c-button--blue:hover, .c-button--blue:focus, .c-button--blue:active {
background-color: #2b6d8e;
border-color: #2b6d8e;
outline: none;
}
.c-offcanvas .c-button {
margin-bottom: 0;
}
.c-button--close-bottom {
position: absolute;
left: 50%;
bottom: -10px;
z-index: 10;
margin-left: -37px;
}
.c-button--close-bottom:hover, .c-button--close-bottom:focus {
outline: none !important;
}
.c-button--close-right-top {
position: absolute;
top: -1px;
right: -1px;
border-radius: 0;
}
.c-button--close-right-top:hover, .c-button--close-right-top:focus {
outline: none !important;
}
.c-button--close-right {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
width: 100%;
left: 0;
}
.c-button--close-right:hover, .c-button--close-right:focus {
outline: none !important;
}
.c-input:focus {
z-index: 1;
outline: 0;
border-color: #757575;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.c-input-add-on {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 1.5em;
}
.c-input-add-on__field {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.c-input-add-on__field:not(:first-child) {
margin-left: -1px;
}
.c-input-add-on__field:not(:last-child) {
border-right: 0;
}
.c-input-add-on__item {
margin: 0;
}
.c-input-add-on__field,
.c-input-add-on__item {
border: 1px solid rgba(147, 128, 108, 0.25);
padding: 0.5em 0.75em;
}
.c-input-add-on__field:first-child,
.c-input-add-on__item:first-child {
border-radius: 2px 0 0 2px;
}
.c-input-add-on__field:last-child,
.c-input-add-on__item:last-child {
border-radius: 0 2px 2px 0;
}
.c-menu {
margin: 0;
}
.c-menu--border .c-menu__item {
border-bottom: 1px solid #e0e0e0;
}
.c-menu__item--heading {
padding: 1.18em;
text-indent: -0.27858em;
font-size: 1.2em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-menu__item--heading {
font-size: 1.2em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-menu__item--heading {
font-size: 1.35em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-menu__item--heading {
font-size: 1.4em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-menu__item--heading {
font-size: 1.5em;
}
}
@media (min-width: 81.25em) {
.c-menu__item--heading {
font-size: 1.6em;
}
}
.c-menu__link {
display: block;
width: 100%;
padding: 0.45074em 1.18em;
text-decoration: none;
line-height: 1.618em;
color: rgba(43, 43, 43, 0.9);
font-size: 1.18em;
background: #fafafa;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
@media (min-width: 81.25em) {
.c-menu__link {
font-size: 1.18em;
}
}
.c-menu__link:hover, .c-menu__link:focus {
color: #212121;
outline: none;
text-decoration: none;
background: #eee;
}
.c-menu--small .c-menu__link {
font-size: 1.18em;
}
.c-page {
overflow: hidden;
padding-top: 1.6992em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-page {
padding-top: 1.6992em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-page {
padding-top: 2.15055em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-page {
padding-top: 2.3128em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-page {
padding-top: 2.655em;
}
}
@media (min-width: 81.25em) {
.c-page {
padding-top: 3.0208em;
}
}
.c-offcanvas--overflow-top {
overflow: visible;
}
body,
.c-offcanvas-content-wrap {
min-height: 100vh;
background-color: #f5f5f5;
}
.c-offcanvas--shadow.is-closed:after {
content: none;
}
.c-offcanvas--shadow:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.c-offcanvas--shadow-left:after {
left: 0;
}
.c-offcanvas--shadow-right:after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
}
.c-offcanvas--bottom.is-open {
box-shadow: 0 -5px 25px rgba(5, 5, 5, 0.38);
}
.c-offcanvas-bg--push.c-offcanvas-bg--push {
background: transparent;
}
.c-offcanvas--push.c-offcanvas--left {
border-right: 1px solid #e0e0e0;
}
.c-offcanvas--push.c-offcanvas--right {
border-left: 1px solid #e0e0e0;
}
.c-offcanvas--top .c-menu__item {
display: inline-flex;
}
.c-callout {
border: 2px solid #bdbdbd;
border-radius: 5px;
background: #eee;
padding: 1.18em;
margin-top: 3.08915em;
}
.c-callout__title {
margin: 0;
}
.c-callout__text {
font-size: 0.98333em;
margin-top: 0;
color: #757575;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-callout__text {
font-size: 0.98333em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-callout__text {
font-size: 0.87407em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-callout__text {
font-size: 0.84286em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-callout__text {
font-size: 0.78667em;
}
}
@media (min-width: 81.25em) {
.c-callout__text {
font-size: 0.7375em;
}
}
.c-callout__button {
width: 100%;
}
.c-callout__footer {
color: #424242;
font-size: 0.98333em;
}
@media (min-width: 20em) and (max-width: 41.25em) {
.c-callout__footer {
font-size: 0.98333em;
}
}
@media (min-width: 41.25em) and (max-width: 46.25em) {
.c-callout__footer {
font-size: 0.87407em;
}
}
@media (min-width: 46.25em) and (max-width: 61.25em) {
.c-callout__footer {
font-size: 0.84286em;
}
}
@media (min-width: 61.25em) and (max-width: 81.25em) {
.c-callout__footer {
font-size: 0.78667em;
}
}
@media (min-width: 81.25em) {
.c-callout__footer {
font-size: 0.7375em;
}
}
.c-callout__footer a {
color: inherit;
text-decoration: none;
}
.c-callout__footer a:hover, .c-callout__footer a:focus {
color: #212121;
outline: none;
text-decoration: underline;
}
</style>
</head>
<body>
<!--Offcanvas Content Wrapper-->
<main class="c-offcanvas-content-wrap" role="main" aria-labelledby="accesible-offcanvas">
<div class="c-page l-wrapper u-pos-relative">
<h1 id="accesible-offcanvas"><span class="u-hidden-visually">Examples </span>Accesible Offcanvas</h1>
<h3>Overlay</h3>
<button class="c-button js-offcanvas-trigger" data-offcanvas-trigger="off-canvas-left">Left</button>
</div>
</main>
<!--
Offcanvas Panels
-->
<!--Left-->
<aside class="js-offcanvas" id="off-canvas-left" role="complementary">
<div class="c-offcanvas__inner o-box u-pos-relative">
<ul class="c-menu c-menu--border u-unstyled">
<li class="c-menu__item c-menu__item--heading">Header</li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Home</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">About</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Portfolio</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Projects</a></li>
<li class="c-menu__item"><a class="c-menu__link" href="#nogo">Contact</a></li>
</ul>
</ul>
</div>
</aside>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/_js/js-offcanvas.pkgd.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>