Preventing Specific Anchors from Adding Irrelevant Entries to Browser History?

Question

Is it possible to prevent selected anchors from adding to the browser's history?

For a site I am working on now, this is a particular issue when I try to prompt back to a previous page. By doing so the anchors repeat in the order they where activated, and I have to click back more than once before returning back to the previous page.

Here's some code I am currently working with. Is there a function I can implement to achieve this result?

<!-- Image with Anchor to Open Lightbox Window -->
<div class="container">
  <a href="#view">
    <div class="pic">
      <img src="https://URLTOPIC.jpg">
    </div>
  </a>
</div>

<!-- Lightbox Prompt with Anchor to Close Window -->
<div class="customlightbox lb-animate" id="view">
  <div class="customlightbox-imgwrap">
    <img class="imgsrc" id="customlightbox-img" src="">
  </div>
</div>
<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>

Any help would be much appreciated!

`` is not a good element to use for pure JS functionality. Use a ` — connexo, Jan 10 '18 at 16:40
`` is meant to be used for one of two purposes: To navigate to a new page, or to jump to an anchor within the same page. For all else, use different elements. — connexo, Jan 10 '18 at 16:48
Ok, then can I activate these anchors within the page with different elements then? I'm just trying to have them function without adding to the browser's history. — nr159, Jan 10 '18 at 16:53
Could I use something like `` and still have the anchor function? — nr159, Jan 10 '18 at 16:55

score 0 · Answer 1 · answered Jan 10 '18 at 17:00

0

When using a empty anchor, for example <a id="close-customlightbox" class="lb-animate" href="#!"></a> which is used as a button, you can set the href this way that will disable the anchor events <a id="close-customlightbox" class="lb-animate" href="javaScript:void(0);"></a>

You can read more about the javascript URI scheme What does "javascript:void(0)" mean?

For the links you are using to trigger the models, avoid the default behavior for it to be added to the window.history object

document.querySelector('.trigger').addEventLister('click', function(e){
  e.preventDefault();
  //Do your stuff
});

answered Jan 10 '18 at 17:00

Nicolas M. Pardo

753
1
6
16

Ok. So, in the example I've provided, the `.trigger` would be `.lb-animate`? What about ``? – nr159 Jan 10 '18 at 17:08
Sorry, just a bit confused... – nr159 Jan 10 '18 at 17:08
No, .trigger is a class you use to show the modal. therefore Then you add a event listener to that document.querySelector('.trigger')addEventLister('click', showModal); And inside the JS function that shows the modal you will pass it the event as a parameter and then avoid the usual behavior function showModal(e){e.preventDefault()} – Nicolas M. Pardo Jan 10 '18 at 17:29
Why would he even use an `a` element for this? With a `button type=button` the step of disabling default behaviour isn't even necessary. `a` is obviously an inappropriate element for the job. – connexo Jan 10 '18 at 19:06
@connexo how can I use ```button type=button``` without JS to link to an anchor and not alter the browser history? – Ken Aug 17 '21 at 09:50

Preventing Specific Anchors from Adding Irrelevant Entries to Browser History?

1 Answers1