Question

我有一个使用wordpress创建的网站，其中包含不同的章节，一个div代表一页。在底部，我有一个按钮，您可以通过该按钮进入下一个div。该脚本基本上可以正常工作，但是该站点在不重新加载页面的情况下不会跳转到div。该问题与以下问题有关：button to jump to next anchor。

锚点以数据锚的形式存储在div中：<div ... data-anchor="c-home">，我想使用此脚本从一个div跳到下一个div：

function goToNextSection(){

var anchordivs = document.querySelectorAll('[data-anchor][data-id]');
var anchors = anchordivs.length;
var loc = window.location.href.replace(/#.*/,'');
var nextAnchorName = 0;

var anchorName = window.location.hash.replace(/#/,'');


if (anchorName){

    for (var i=0, iLength=anchordivs.length; i<iLength; i++) {
        if (anchordivs[i].dataset.anchor == anchorName) {

            nextAnchorName = anchordivs[(i+1) % iLength].dataset.anchor;
        break;
        }
}

}
if (!nextAnchorName){
nextAnchorName=anchordivs[0].dataset.anchor;
}
document.location.hash ='#' + nextAnchorName;
document.location.reload();

没有reload（）命令，浏览器的地址行将被更新，但实际的向下滚动将不起作用。如果我用鼠标滚动，锚点将在地址栏中正确更新。但是，在地址线中手动更改锚点也不会跳到该部分。

有人可以帮忙吗？

Answer 1

在更新位置时以'＃'开头。不需要哈希。

将document.location.hash ='#' + nextAnchorName;更改为简单的document.location.hash = nextAnchorName;

请参阅此jsfiddle。

div数据锚不重新加载整个页面就无法工作

1 个答案: