轉到下一個錨點按鈕

我已經在頂部設置了一些錨點和一個小菜單。當我點擊一個菜單項時，它將滾動到該錨點。轉到下一個錨點按鈕

我想要做的是在菜單上有一個下一個箭頭，以確定我的頁面上的下一個錨點並滾動到onClick。

我的錨的#header，＃BOX1 - ＃了Box5

我想如果可能的話用JavaScript來做到這一點。這裏是我的網頁在HTML中使用一個onClick

2011-04-26 Alex

東西：

<a href="#" onclick="goToNext();return false;">===></a>

...然後JavaScript的：

var max = 5; 

function goToNext() { 
    var hash = String(document.location.hash); 
    if (hash && hash.indexOf(/box/)) { 
     var newh = Number(hash.replace("#box","")); 
     (newh > max-1) ? newh = 0 : void(null); 
     document.location.hash = "#box" + String(newh+1); 
    } else { 
     document.location.hash = "box1";   
    } 
}

變化max你想要的最高數量（box1，box2等）。不知道這是否會保持動畫，但你可以看看一個例子here。只需看地址欄。

來源

2011-04-26 22:13:17 Shaz

有一個名爲document.anchors的HTML集合。要轉到下一個定位點，請從網址中獲取當前定位點名稱，然後在document.anchors中查找它。如果你找到它，下一個將成爲下一個索引。如果您在最後一個索引處，請將錨點設置爲第一個。否則，如果沒有匹配，只需將其設置爲第一個。

這允許您使用任何方案命名錨點，它們將按照它們在DOM中出現的順序進行訪問。

例如

<head> 
<!-- Hide script-dependent content --> 
<style type="text/css"> 
.requiresScript-block, .requiresScript-inLine { 
    display: none; 
} 
div.spacer { 
    height: 500px; 
    border: 1px solid blue; 
} 
</style> 
<script type="text/javascript"> 

function goToNextAnchor() { 
    var anchors = document.anchors; 
    var loc = window.location.href.replace(/#.*/,''); 
    var nextAnchorName; 

    // Get name of the current anchor from the hash 
    // if there is one 
    var anchorName = window.location.hash.replace(/#/,''); 

    // If there is an anchor name... 
    if (anchorName) { 

    // Find current element in anchor list, then 
    // get next anchor name, or if at last anchor, set to first 
    for (var i=0, iLen=anchors.length; i<iLen; i++) { 
     if (anchors[i].name == anchorName) { 
     nextAnchorName = anchors[++i % iLen].name; 
     break; 
     } 
    } 
    } 

    // If there was no anchorName or no match, 
    // set nextAnchorName to first anchor name 
    if (!nextAnchorName) { 
    nextAnchorName = anchors[0].name; 
    } 

    // Go to new URL 
    window.location.href = loc + '#' + nextAnchorName; 
} 

// Display script-dependent content if javascript available 
document.write(
    '\u003Cstyle type="text/css"\u003e' + 
    '.requiresScript-block {display: block;}' + 
    '.requiresScript-inLine {display: inline;}' + 
    '\u003C/style\u003e' 
); 
</script> 
</head> 
<body> 
    <ol> 
    <li><a href="#header">Go to header</a> 
    <li><a href="#box1">Go to box 1</a> 
    <li><a href="#box2">Go to box 2</a> 
    <li><a href="#box3">Go to box 3</a> 
    <li><a href="#box4">Go to box 4</a> 
    <li><a href="#box5">Go to box 5</a> 
    </ol> 

    <!-- Only shown if javascript available --> 
    <button class="requiresScript-inLine" onclick="goToNextAnchor()">Next</button> 

    <a name="header"></a><h1>Header</h1> 
    <div class="spacer">content</div> 
    <p><a name="box1"></a><p>Box 1</p> 
    <div class="spacer">content</div> 
    <p><a name="box2"></a><p>Box 2</p> 
    <div class="spacer">content</div> 
    <p><a name="box3"></a><p>Box 3 </p> 
    <div class="spacer">content</div> 
    <p><a name="box4"></a><p>Box 4</p> 
    <div class="spacer">content</div> 
    <p><a name="box5"></a><p>Box 5</p> 
</body>

來源

2011-04-27 05:02:25 RobG

轉到下一個錨點按鈕

回答

相關問題