CODEWITHSUNDEEP
javascripthtmlbuttonanchor
Alex
Alex

Reputation: 1

Goto Next Anchor Button

I have set up some anchors and a little menu up top. when I click a menu item, it will scroll to that anchor.

what I want to do is have a next arrow on the menu to determine the next anchor on my page and scroll to it onClick.

My anchors are #header, #box1 - #box5

I would like to do it with JavaScript if possible. here is my page
My Page

Upvotes: 0

Views: 6875

Answers (2)

RobG
RobG

Reputation: 147383

There is an HTML collection called document.anchors. To go to the next anchor, get the current anchor name from the URL and look for it in document.anchors. If you find it, the next one will be the next index. If you're at the last index, set the anchor to the first. Otherwise, if there is no match, just set it to the first.

This allows you to use any scheme for naming anchors, they will be visited in the order they appear in the DOM.

e.g.

<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>

Upvotes: 2

Shaz
Shaz

Reputation: 15867

Something using an onClick in your HTML:

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

...and then the 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";        
    }
}

Change max the highest number you want to go (for box1, box2, etc...). Not sure if this will keep the animation, but you can take a look at an example here. Just watch the address bar.

Upvotes: 0

Related Questions