Javascript锚到同一页面不起作用答案

【问题标题】：Javascript anchor to same page not workingJavascript锚到同一页面不起作用
【发布时间】：2014-12-03 16:42:23
【问题描述】：

所以我有一个网页，而不是使用新的 html 文档（它是用于手机的，所以每次加载新的 html 页面都会非常慢），每个页面我都有代表不同页面的部分。

看起来像这样：

<body>

    <!-- each body must contain att least one section that is shown as a page -->
    <section id = "page-1" data-ff-role = "home default swipe-in">

        <!-- each section should have a header -->
        <header style="background-color: #CCE4F5;">

所以我创建的每个部分都有自己的 ID。现在，当我尝试使用以下方式链接到它时：

     function callback_listAllPOI(xmlObj){ 
        console.log("callback_listAllPOI");

        var names = xmlObj.getElementsByTagName("POI_namn");
        var comments = xmlObj.getElementsByTagName("POI_kommentar");
        for (i=0;i<names.length; i++){
            var text = '<li><a href="#page-1">' + names[i].textContent + ': ' + comments[i].textContent + '</a></li>';
            $("#deployPOIList").append(text);
        }

    };

我可以将 'li' 项目添加到目标 'ol' 并添加文本和所有内容，但 href 不起作用。当它被按下时，它只是在我的网址末尾添加#page-1，而不是仅仅转到页面上的锚点。我尝试使用 document.createElement('a') 创建一个标签，但结果相同。

编辑：我可以静态地为锚点工作的网页创建一个链接标签，只有带有 javascript 的锚点不起作用。这个工作就像它应该的那样：

<li><a href="#page-1">Page 1</a></li>

编辑 2： 都尝试了，但对我没有任何影响。由于我必须在昨天完成它才能按计划进行，所以我必须做出决定，所以我改用 PhP 并让它以这种方式工作。不过感谢您的回答，希望他们能帮助遇到类似问题的人！

【问题讨论】：

标签： javascript html anchor href

【解决方案1】：

您的代码应该可以工作。也许您的网页上没有太多内容，因此浏览器不会滚动到适当的位置。我在小提琴链接中有一个例子：http://jsfiddle.net/z78p7d5L/8/

HTML 代码：

<ul id="deployPOIList"></ul>    

<section id = "page-1" data-ff-role = "home default swipe-in">

        <!-- each section should have a header -->
        <header style="background-color: #CCE4F5;">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
        </header>
    </section>

<section id = "page-2" data-ff-role = "home default swipe-in">

        <!-- each section should have a header -->
        <header style="background-color: #CCE4F5;">testtest test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
        </header>
    </section>

JS代码：

var text1 = '<li><a href="#page-1">hello1</a></li>';
    var text2 = '<li><a href="#page-2">hello2</a></li>';
            $("#deployPOIList").append(text1).append(text2);

【讨论】：

每个部分只包含几行文本和一个音频标签和/或一张图片，所以可能是我没有足够的内容。将尝试添加更多，看看是否有效！谢谢@ArinCool

【解决方案2】：

我希望你试图模仿JQuery Mobile。在您的情况下，您可能一次只显示一个页面，而在 css 的帮助下隐藏其他页面。
但是更改 URL 的哈希（通过锚点单击）不能显示隐藏的元素。如果没有隐藏，它只会尝试滚动到该 id。
您可以做的是附加一个 onclick 处理程序并首先设置可见性然后滚动。类似下面的东西

$(document).on('click', 'anchorSelector', handlePageNavigation);
function handlePageNavigation() {
    var $obj = $(this);
    //get Page Id by inspecting $obj href property
    //use some class to mark active / inactive pages
    //remove the active class with all page section
    //add active class to current page so that its display = block      
}

【讨论】：