Question

要把它煮沸，我有两页。简化后，它们可以用这种方式表示。

第1页

<html>
    <a href="page-2.html#section-A">Link to section A</a>
</html>

第2页

<html>
    <script>        
        // Assume jQuery
        $(document).ready(function(){
            $('#wrapper').append($('<a name="section-A">Here is Section A</a><p>Some more content here.</p>'));
        });
    </script>
    <div id="wrapper"></div>
</html>

这样做的问题是，当您点击第1页中的链接时，请说“http://www.mydomain.com/page-2.html#section-A”，但是在DOM加载之后，锚点链接到的内容才会生成，考虑到首先加载了URL，为时已晚。

如果问题不明确，请告诉我，我会尝试进一步澄清，但如果有人对如何使这样的情景工作有任何初步想法，请告诉我。

Answer 1

在第二页中，“ready”处理程序中的代码可以检查页面位置。如果该位置中包含“#wrapper”，则您的javascript可以重置该位置。

$(document).ready(function(){
  $('#wrapper').append($('<a name="section-A">Here is Section A</a><p>Some more content here.</p>'));
  if (document.location.hash === '#wrapper')
    document.location.hash = '#wrapper';
});

我会试一试，看看它是否真的有效。： - ）

修改确定这是一个测试页：http://gutfullofbeer.net/hash1.html

有两个链接：一个包含哈希值（在我的情况下为'#hello'），另一个则没有。当您单击第二个时，您会注意到您在页面底部看到“hello”部分。当您单击第一个页面时，您将转到同一页面，但“hello”部分将不可见（除非您的浏览器窗口非常巨大）。

在DOM准备就绪之后，在另一个页面上创建内容之后的锚点

1 个答案: