1

I have a page with a few anchors. When a user clicks an anchor, the anchors work, and user is taken to the correct location.

If a user tries to refresh the page, it retains the anchor ID in the URL window and so naturally, when refreshing, it does not go back to the top of the page.

I think it would be more user friendly to go back to the top of the page on a refresh.

How would I achieve this?

My page currently is primarily using bootstrap, css, jquery, javascript, and php.

I think I need to set up some code so that after clicking the anchor, it removes the anchor from the url window, so that if someone refreshes, they'd be refreshing just the initial page state without an anchor, but I don't know how to begin. Or maybe I'm over thinking this and there's some way to always go to top of page on a refresh regardless of anchors or not. I'm not too code savvy.

Right now my code is like this...

An example of one of my anchors:


<a class="hoverlink" href="#firefighter"><li style="float:left; margin-right:1em; color:white; background-color:red" class="appao-btn nav-btn">Fire Fighter</li></a>

One of the elements for example that the anchor will jump to:


<div style="min-height:10px;" name="firefighter" id="firefighter" class="anchor"><p style="min-height: 10px;">&nbsp;</p></div>

CSS style on my anchors:

.anchor:target { height:200px; display: block; margin-top:-2em; visibility: hidden;}

Actual Results With My Code: Page Refresh Stays At Anchor Location

Desired Results: Page Refresh Goes To Top Of Page

After some searching, I found a solution that almost works for me:

<script>
window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
</script>

But it creates a flickering effect that doesn't look the best such as my example site at

https://graceindustries.com/gracetest/Grace%20Industries%20Website%20Design%202019%20Alternate%20Version/documentation.html

Anyone know how to remove the "flicker"?

Xenokitten
  • 11
  • 5

3 Answers3

0

You can try this (with the .some-anchor is the class for all a tag that points to some destinations within the page). 

$('.some-anchor').click(function() {
    var target = $(this).attr("href");
    $('html, body').animate({
        scrollTop: $("" + target).offset().top
    }, 1000);
    return false;
  });

The "return false;" or preventDefault() event method will prevent the page from flickering. As I observed this does not make the # to the URL so refreshing is not a problem.

Other helpful answer: jQuery flicker when using animate-scrollTo

Anh K
  • 96
  • 5
0

Navigating to page content using URL Fragments (#someLink) in anchor tags is a core part of the HTML specification. The standard implementation in most (if not all) web browsers is to add the fragment to the address bar. The fragment is part of the URL and therefore, when the page is refreshed the browser scrolls to the element with that ID. Most users will be familiar with this behaviour, even if they don't understand how or why it works like that. For this reason, I'd recommend not working around this behaviour.

However, if it is absolutely necessary, the only way to achieve the result you're looking for is to not use URL fragments for navigation and use JavaScript instead, therefore not putting the fragment in the URL in the first place. It looks like the Element.scrollIntoView() method might do what you're looking for. Rather than having <a href="#element1">Click me</a> you'd use <a onclick="document.getElementById('element1').scrollIntoView();">Click me</a> or even better, implement this in an external JS file. If you experience issues due to the element not having the href attribute, you could always add an empty fragment href="#".

luc122c
  • 409
  • 9
  • 17
0

You can remove the id from the url right after the user click on the anchor tag

history.scrollRestoration = "manual" will set the scroll to the top of the page on refresh

<a onclick="removeAnchorFormURL()" href="#sec-2">here</a>

<script>
  history.scrollRestoration = "manual";

  const removeAnchorFormURL = () => {
    setTimeout(() => {
      window.history.replaceState({}, "", window.location.href.split("#")[0]);
    }, 100);
  };
</script>

window.location docs

location.href docs

location.replace docs

scrollRestoration docs (check it for info on scrollRestoration compatibility)

Gabriel Nuñez de Andrade
  • 448
  • 3
  • 8