单页上的动画3D菜单导航

Question

我一直在玩这种https://www.filesilo.co.uk/tutorial-files/create-an-animated-3d-menu侧边栏菜单效果以用于单页网站。

所以我想做的是，当我单击菜单上的链接之一时，我想滚动到适当的位置。而且，当我滚动到这个特定位置时，我已经获得了部分成功，整个网站的滚动都被禁用，并且页面卡在其中。

谁能告诉我我做错了吗？

以下是我的JS，CSS和HTML文件。

function scrollY() {
  return window.pageYOffset || docElem.scrollTop;
}

var docElem = window.document.documentElement,
  support = "transition",
  transEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
  },
  transEndEventName = transEndEventNames['transition'],
  docscroll = 0;

function init() {
  var showMenu = document.getElementById('showMenu'),
    twistWrapper = document.getElementById('twist'),
    container = twistWrapper.querySelector('.container'),
    contentWrapper = container.querySelector('.wrapper');

  showMenu.addEventListener('click', function(ev) {
    ev.stopPropagation();
    ev.preventDefault();
    docscroll = scrollY();
    // change top of contentWrapper
    contentWrapper.style.top = docscroll * -1 + 'px';
    // mac chrome issue:
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    // add modalview class
    classie.add(twistWrapper, 'open');
    // animate..
    setTimeout(function() {
      classie.add(twistWrapper, 'animate');
    }, 25);
  });

  container.addEventListener('click', function(ev) {
    if (classie.has(twistWrapper, 'animate')) {
      var onEndTransFn = function(ev) {
        if (support && (ev.target.className !== 'container' || ev.propertyName.indexOf('transform') == -1)) return;
        this.removeEventListener(transEndEventName, onEndTransFn);
        classie.remove(twistWrapper, 'open');
        document.body.scrollTop = document.documentElement.scrollTop = docscroll;
        contentWrapper.style.top = '0px';
      };
      twistWrapper.addEventListener(transEndEventName, onEndTransFn);
      classie.remove(twistWrapper, 'animate');
    }
  });

  twistWrapper.addEventListener('click', function(ev) {
    return false;
  });


  document.getElementById('demoo').addEventListener('click', myFunction);

  function myFunction() {
    // preventDefault();
    classie.remove(twistWrapper, 'animate');





 
    document.getElementById("demo").scrollIntoView();
  }

  myFunction();

}
//
// function myFunction() {
//   // classie.remove( twistWrapper, 'animate' );
//   removeClass('animate');
//   document.getElementById("demo").scrollIntoView();
// }

init();
HTML

html,
body,
.twist {
  width: 100%;
  height: 100%;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #fff;
  color: #5a5350;
  font-weight: 300;
  font-family: Calibri, Arial;
  overflow-y: scroll;
  overflow-x: hidden;
}

.header {
  margin: 0 auto 3em;
  padding: 3em;
  text-align: center;
}

.header h1 {
  margin: 0;
  font-weight: 300;
  font-size: 2.625em;
  line-height: 1.3;
}

.header span {
  display: block;
  padding: 0 0 0.6em 0.1em;
  font-size: 60%;
  color: #aca89a;
}

.main {
  background: #fff;
  max-width: 69em;
  margin: 0 auto;
}

.column {
  float: left;
  width: 50%;
  padding: 0 2em;
  min-height: 300px;
  position: relative;
  text-align: right;
}

.column:nth-child(2) {
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
  text-align: left;
}

.column p {
  font-weight: 300;
  font-size: 1.5em;
  padding: 0 0 0.5em;
  margin: 0;
  line-height: 1.5;
}

button {
  border: none;
  padding: 0.6em 1.2em 0.4em;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
  outline: none;
  background: #b40000;
}

button:hover,
button:active {
  background: #6c0404;
}

.twist {
  position: relative;
}

.container {
  background: #fff;
  min-height: 100%;
  position: relative;
  outline: 1px solid rgba(0, 0, 0, 0);
  z-index: 10;
  -webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
  transform: translateZ(0) translateX(0) rotateY(0deg);
}

.wrapper {
  position: relative;
}

.twist.open {
  position: fixed;
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.open .container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.open .wrapper {
  -webkit-transform: translateZ(-1px);
}

.animate .container::after {
  opacity: 1;
  height: 101%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.offscreen-nav {
  position: absolute;
  height: auto;
  font-size: 2em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  left: 25%;
}

.offscreen-nav a {
  display: inline-block;
  white-space: nowrap;
  font-weight: 300;
  text-decoration: none;
  margin: 0 0 30px 0;
  color: #fff;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.offscreen-nav a:hover {
  color: #fff72f;
}

.offscreen-nav a {
  display: block;
}

.effect-persp {
  background: #b40000;
}

.effect-persp .container {
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.effect-persp.animate .container {
  -webkit-transform: translateZ(-1500px) translateX(100%) rotateY(-45deg);
  transform: translateZ(-1500px) translateX(100%) rotateY(-45deg);
}

.effect-persp .offscreen-nav a {
  opacity: 0;
  -webkit-transform: translateX(-150px);
  transform: translateX(-150px);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
}

.effect-persp.animate .offscreen-nav a {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}


/* Media Queries */

@media screen and (max-width: 31em),
screen and (max-height: 36.2em) {
  .offscreen-nav {
    font-size: 1.2em;
    width: 6.8em;
  }
  .header {
    margin-bottom: 0;
    padding-bottom: 1em;
  }
  .column {
    width: 100%;
    min-width: auto;
    min-height: 0;
    padding: 2em;
    text-align: center;
  }
  .column p {
    font-size: 1.5em;
  }
  .column:nth-child(2) {
    text-align: center;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

@media screen and (max-height: 31.6em) {
  .offscreen-nav a {
    margin-bottom: 12px;
  }
  .header {
    font-size: 80%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Perspective Menu</title>
  <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div id="twist" class="twist effect-persp">
    <div class="container">
      <div class="wrapper">
        <button id="showMenu"><img src="img/icon-menu.png" width="40" alt="menu navigation"></button>
        <header class="header">
          <img src="img/twist.png">
          <h1>Twist Design Agency <span>Transforming your online presence with a unique twist</span></h1>
        </header>
        <div class="main">
          <div class="column">
            <img src="img/bulb.png">
            <p>We produce creative ideas and strategies that will maximize your digital presence.</p>
          </div>

          <div class="column">
            <img src="img/graph.png">
            <p>Your business growth is our business growth, read our case studies of how we have developed digital business for our clients. </p>
          </div>

          <div class="column">
            <img src="img/graph.png">
            <p>Your business growth is our business growth, read our case studies of how we have developed digital business for our clients. </p>
          </div>

          <div class="column" id="demo">
            <img src="https://via.placeholder.com/480x640.png">
            <p>HERE IS THE PLACE OF PROBLEM</p>
          </div>
        </div>
      </div>
    </div>
    <nav class="offscreen-nav">
      <a href="#">Home</a>
      <a href="#">News</a>
      <a href="#demoo" id="demoo">HEREEE</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
      <a href="#">About</a>
    </nav>
  </div>
  <!-- /twist -->
  <script src="js/classie.js"></script>
  <script src="js/twist.js"></script>
</body>

</html>