使用AJAX更改内容 - 当用户导航到直接URL时，不会显示新内容

Question

我想创建一个刷新div异步内容的页面，同时为用户提供一个锚点，以便能够直接访问div中的内容。 （例如www.website.co.uk/#page1）

我设法做到这一点，以便内容可以更新为1页，但是，如果我添加多个页面，它就会停止工作

此外 - 如果我要导航到URL website.co.uk/#page1，它将不会显示＃page1。

有人可以帮忙吗？

这是我目前的代码：

HTML：

<h5> <a href="#page1">Test</a></h5>
<h5> <a href="#page2">Test2</a></h5>

JS：

<script type="text/javascript">
    var routes = {
        '#page1' : '{{site.url}}/page1'
        '#page2' : '{{site.url}}/page2'
    };
    var routeHandler = function( event ) {
        var hash = window.location.hash, 
            xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("div1").innerHTML = xhttp.responseText;
            }
        };
        xhttp.open("GET", routes[hash], true);
        xhttp.send();    
    };
    window.addEventListener('hashchange', routeHandler);
    window.addEventListener('load', function() {
        var hash = window.location.hash;
        if (routes.hasOwnProperty(hash)) routehandler();
    });
</script>