title: Unexpected scroll after click on link
body: <p>I have some troubles with adding links to my html file. I am using this codepan and I am trying to add a link which should redirect me to another div. Unfortunately, after clicking on the link it took me to the div but with any scroll movement, it takes me back to the previous position. Does anyone have any idea why it is not working properly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var page = document.getElementById('page');
  var last_pane = page.getElementsByClassName('pane');
  last_pane = last_pane[last_pane.length-1];
  var dummy_x = null;
  
  window.onscroll = function () {
    // Horizontal Scroll.
    var y = document.body.getBoundingClientRect().top;
    page.scrollLeft = -y;
    
    // Looping Scroll.
    var diff = window.scrollY - dummy_x;
    if (diff &gt; 0) {
      window.scrollTo(0, diff);
    }
    else if (window.scrollY == 0) {
      window.scrollTo(0, dummy_x);
    }
  }
  // Adjust the body height if the window resizes.
  window.onresize = resize;
  // Initial resize.
  resize();
  
  // Reset window-based vars
  function resize() {
    var w = page.scrollWidth-window.innerWidth+window.innerHeight;
    document.body.style.height = w + 'px';
    
    dummy_x = last_pane.getBoundingClientRect().left+window.scrollY;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    overflow-x:hidden;
    color:#FFF;
    font-family:Helvetica;
    font-size:200%;
  }
  #page {
    overflow:hidden;
    white-space:nowrap;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#CCC;
    display:flex;
    flex-wrap:no-wrap;
  }
  .pane {
    flex:0 0 100vw;
    height:100vh;
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    background-color: #45CCFF;
  }
  
  .pane:nth-child(4n+2)  {
    background-color: #49E83E;
  }
  .pane:nth-child(4n+3)  {
    background-color: #EDDE05;
  }
  .pane:nth-child(4n+4)  {
    background-color: #E84B30;
  }
  .pane:last-child {
    background-color: #45CCFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="page"&gt;
    &lt;div class="pane"&gt;&lt;div&gt;Looping Horizontal Scroll&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;Last&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;Looping Horizontal Scroll&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/anon/pen/OqzGJB" rel="nofollow noreferrer">https://codepen.io/anon/pen/OqzGJB</a></p>
  
  <pre><code>&lt;div id="page"&gt;
    &lt;div class="pane"&gt;&lt;div&gt;Looping Horizontal Scroll&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;&lt;a href="#test"&gt;hello&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div id="test"&gt;5&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;Last&lt;/div&gt;&lt;/div&gt;
    &lt;div class="pane"&gt;&lt;div&gt;Looping Horizontal Scroll&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>