Anchor remains in URL and in page after refreshing

Question

I have this little issue here with my page, where if I reload it while being anchored, the anchor remains and there is a problem to it. I.E

http://localhost/public/product/1#mod1

The anchor is #mod1, and while the anchor remains active after refresh, my CSS code is saying that this element:

.overlay:target

is active. Which is a very big issue, because then it doesn't allow me to explore the functionallity I have implemented on this anchor, unless I remove the #mod1 from the end of the page manually by hand. Because this CSS element makes this div visible when it should be not unless activated with the a href element.

<a href="#mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">
    content
</div>

Any ideas on how could I solve it? I tried catching whether the user has refreshed the page and redirecting him to an action/route/url, but the page stays blank then and URL unchanged.

It seems like this had already been answered here- http://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url — Harshali Talele, Apr 01 '17 at 13:36

Michael Anthony Borchardt · Answer 1 · 2017-04-01T13:35:22.823

0

You cannot use href with angularJS because it will misdirect the target link. AngularJS is a markup language for HTML, it is not HTML. Because angularJS is not HTML, we're provided a special set of directives to write angularJS values inline into HTML markup. The answer to solve your issue would be to replace the href tag in the anchor element with the angularJS directive ngHref. You can find more information about how to use ngHref and other directives at the link below. Good luck.

https://docs.angularjs.org/api/ng/directive/ngHref

edited Apr 01 '17 at 13:35

answered Apr 01 '17 at 13:24

Michael Anthony Borchardt

1
3

This is **not** an answer. Read [answer] to make it sustainable throughout the future and make a good helpfull answer. – Nytrix Apr 01 '17 at 13:25

score 0 · Answer 2 · answered Apr 01 '17 at 13:58

Well I wanted to purely solve this without JS, but here's what I did, HTML:

<a ng-href="mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">

Then replaced the CSS of overlay:target to -> overlay:active, and implemented JS:

var curmod;
$('a.button').on('click', function(e)
{
    curmod = document.getElementById($(this).attr('ng-href'));
    $(curmod).addClass('active');
});
$('.popup a.close').on('click', function(e)
{
    $(curmod).removeClass('active');
    curmod = null;
});

Anchor remains in URL and in page after refreshing

2 Answers2