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>/</span>
    <button type="button" id="to-top">To Top</button>
  </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>
    <li><a href="/3" title="Pagina 3">Page 3</a></li>
  </ul>
</nav>


<div class="tab tab-1"></div>
<div class="tab tab-2"></div>
<div class="tab tab-3"></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 {
    margin-left: 20px;
    vertical-align: middle;
  }
  
  > 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: 200vh;
  
  .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) {
    $('h2 span').html(url || "/");
    $("#menu-nav a").removeClass('is-active').filter('[href="' + url + '"]').addClass('is-active');
    
    var m = url.match(/\/(\d+)$/);
    if (m) {
    	$('.tab').hide().filter('.tab-' + m[1]).show();
    }
};

var setupLines = function ($tab, step) {
  // create positioning lines
  var height = $tab.height();
  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]);
  }
  $tab.append(frag);
};

$('#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 () {
	$('.tab').each(function () {
  	setupLines($(this), 100);
  });

	if ($('h2 > span').text() === '/') {
  	$('#menu-nav a:first').click();
  }
});