使用AJAX将页面加载到特定锚点的div中

Question

我在这里看到了与此相关的一些问题，但是我没有看到我正在谈论的确切情况，所以我想问一下。

我有一个包含两个div的页面。 一个sidenav div（ sidediv ）和一个主体（ maindiv ）div。

我想要的是：单击侧面导航栏中的链接以在主div中加载页面。 无论如何，此刻始终是同一页面，但它是一个包含多个锚点的巨大页面。 侧面的项目链接到各种锚点。

我在做什么：我的sidenav链接如下所示：

<a href="#" onclick="loadPage('mypage.html#ds'); return false;">Desired Section</a>

和JS：

function loadPage(url){
    var xhr= new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange= function() {
        if (this.readyState!==4) return;
        if (this.status!==200) return; 
        document.getElementById('maindiv').innerHTML= this.responseText;
    };
    xhr.send();
}

发生的情况：可以很好地加载mypage.html，但拒绝定位。

我如何做到这一点（没有jQuery，BTW，我目前不在网站上使用它，也不希望一件事将其加载进来）

谢谢。

Answer 1

好的，这很有趣，所以我为您拍摄了照片。 这是我想出的。 它使用scrollIntoView 。 还要记住，我模拟了ajax调用，因此我的loadPage函数所做的某些事情与您所做的有所不同。

 var pages = { 'mypage.html': '<div id="ts" class="page">my stuff</div><div id="ds" class="page">my more stuff</div><div id="eds" class="page">my even more stuff</div>', 'yourpage.html': '<div id="ts" class="page">your stuff</div><div id="ds" class="page">your more stuff</div><div id="eds" class="page">your even more stuff</div>' }; function loadPage(url) { var set = url.split('#'), page = set[0], id = set[1]; // simulate xhr request setTimeout(function() { document.getElementById('maindiv').innerHTML = pages[page]; document.getElementById(id).scrollIntoView(); }, 1000); } 

 .page { height: 400px; } .menu { width: 200px; float: left; position: fixed; } #maindiv { width: 50px; float: right; background: lightblue; } 

 <div class="menu"> <a href="#" onclick="loadPage('mypage.html#ds'); return false;">My Page #ds</a><br /> <a href="#" onclick="loadPage('yourpage.html#eds'); return false;">Your Page #eds</a> </div> <div id="maindiv"> </div>