Used history API and prevent scrolling to anchor when opening a job link

pages/jobs.tmpl

 title=Working at Eyeo
 
 {% set openings = ("Web Developer", "C++ Developer", "Android Developer", "DevOps Engineer", "HR Manager", "PR Intern", "Business Development Manager") %}
 {% macro slugify(title) %}{{ title|lower|replace(" ", "-") }}{% endmacro %}
 
 <script src="/js/jquery.ui.core.min.js"></script>
 <script src="/js/jquery.ui.widget.min.js"></script>
 <script src="/js/jquery.ui.tabs.min.js"></script>
 <script>
   jQuery(function()
   {
     jQuery(
       "ul:first", jQuery("#tabs-openings").tabs(
       {
         activate: function(event, ui)
         {
           var hash = ui.newTab.find("a")[0].hash;
-          if (hash != "#jobs-overview")
-            location.hash = hash;
+          if ((hash != "#jobs-overview" ? hash : "") != document.location.hash)
+            history.pushState(null, null, hash);
         }
       })
     ).addClass("ui-tabs-nav-vertical");
 
     jQuery("#tabs-details").tabs();
 
     jQuery(window).on("hashchange", function()
     {
       var hash = location.hash != "" ? location.hash : "#jobs-overview";
       var escapedHash = hash.replace(/\+/g, "\\+");
       jQuery("[href=" + escapedHash + "]").click();
     });
+
+    setTimeout(function() { window.scrollTo(0, 0); }, 0);
   });
 </script>
 
 
 <header class="page-title">
   <h1>Working at Eyeo</h1>
 </header>
 
 <div id="jobs-info" class="content-block">
   <div id="tabs-openings" class="columns-container one-sidebar">
@@ skipping 42 matching lines @@
           <div id="{{ slugify(title) }}">
             <h2>{{ title }}</h2>
             <? include jobs/openings/{{ slugify(title) }} ?>
             <a href="mailto:jobs@eyeo.com"><button>apply now</button></a>
           </div>
         {% endfor %}
       </div>
     </div>
   </div>
 </div>