Chrome History scroll restoration issue

by Chih-Hsuan Fan

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,700"></script>
<nav>
  <h2>
    Current Page: <span id="curr-page" class="big">/</span>
    <span class="text">Scroll Count: <span id="scroll-count" class="big">0</span></span>
    <span class="text"><button type="button" id="to-top">To Top</button></span>
  </h2>
  <ul id="menu-nav">
    <li><a href="/1" title="Pagina 1">Page 1</a></li>
    <li><a href="/2" title="Pagina 2">Page 2</a></li>
  </ul>
</nav>


<div class="tab tab-1">
  <div class="content"></div>
</div>
<div class="tab tab-2">
  <div class="content"></div>
</div>

SCSS

body {
  margin: 0;padding:0;
  font-family: 'Open Sans', sans-serif;
}

nav {
  position: fixed; z-index: 100;
  left: 0; top: 0;
  width: 100%;
  
  padding: 10px;
  
  background-color: rgba(255, 255, 255, .3);
  transition: background-color .3s;
  
  &:hover {
    background-color: rgba(255, 255, 255, .7);
  }
  
  button {
    vertical-align: middle;
  }
  
  .big {
    font-size: 26px;
  }
  
  .text {
    display: inline-block;
    margin-left: 20px;
  }
  
  > h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  > ul {
    text-align: left;
    margin-left: 20px;

    > li {
      display: inline-block;
      margin-right: 10px;
    }

    a {
      font-size: 14px;
      color: #555;
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }

      &.is-active {
        font-size: 18px;
        text-decoration: underline;
        font-weight: bold;
      }
    }
  }
}


.tab {
  position: relative;
  /* height: 10000px; */
  
  .content {
    counter-reset: img;
    .img {
      position: relative;
      text-align: right;
    
      &::after {
        counter-increment: img;
        content: counter(img);
        
        position: absolute;
        right: 10px; top: 6px;
        
        font-size: 30px;
        color: #fff;
        text-shadow: 1px 1px 4px black;
        font-weight: bold;
      }
    }
  }
  
  .line {
    position: absolute;
    right: 0;
    width: 10px;
    height: 1px;
    background-color: fade-out(#fff, 0.5);
    
    &::after {
      content: attr(data-top);
      
      transform: translateY(-50%);
      
      position: absolute;
      right: 15px; top: 0;
      font-size: 20px;
      color: #eee;
    }
  }
}

.tab-1 {
  background-color: #2ecc71;
}

.tab-2 {
  background-color: #e74c3c;
}

.tab-3 {
  background-color: #3498db;
}

JavaScript

// this should be the Ajax Method.
// and load the url content
var setCurrentPage = function(url) {
    $('#curr-page').html(url || "/");
    $("#menu-nav a").removeClass('is-active').filter('[href="' + url + '"]').addClass('is-active');
    $('#scroll-count').text(0);
    
    var m = url.match(/\/(\d+)$/);
    if (m) {
    	var $tab = $('.tab').hide().filter('.tab-' + m[1]).show();
      $tab.find('.content').html('');
      
      addImages($tab, 10, 500);
    }
};

var setupLines = function ($tab, step, height) {
  // create positioning lines
  var count = Math.floor(height / step);
  var frag = document.createDocumentFragment();
  var i;
  var $line;
  for (i = 0; i < count; i++) {
  	$line = $('<div class="line" />')
    	.attr('data-top', (i + 1) * step)
      .css({
        top: (i + 1) * step
      });
  	frag.appendChild($line[0]);
  }
  console.log('frag', frag);
  console.log($tab.find('.lines'));
  $tab.find('.lines').append(frag);
};

var addImages = function ($tab, count, interval) {
	var srcBase = 'https://picsum.photos/320/240';
	var $content = $tab.find('.content');
  var i;
  var delay;
  for (i = 0; i < count; i++) {
  	delay = i * interval;
  	setTimeout($.proxy(function (no) {
    	var $img = $('<div class="img"><img src="'+ (srcBase + '?image=' + (no * 10)) +'" /></div>');
    	$content.append($img);
    }, null, i + 1), delay);
  }
};

$('#to-top').click(function () {
	$('html, body').animate({
  	scrollTop: 0
  }, 300);
});

$('#menu-nav a').click(function(e){
    e.preventDefault();
    var targetUrl = $(this).attr('href'),
        targetTitle = $(this).attr('title');
    
    $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);
    
    window.history.pushState({url: "" + targetUrl + ""}, targetTitle, targetUrl);
    setCurrentPage(targetUrl);
});

window.onpopstate = function(e) {
    // $("#menu-nav a").fadeTo('fast', 1.0);
    setCurrentPage(e.state ? e.state.url : null);
};

$(function ()...