Javascript back to top without adding # to the URL

Question

I am a JavaScript rookie. Using a free template code for building a web page. I have a perfectly working back to top snippet but the problem is, it is adding "#" to the URL when i click on it. And when i click browser back button i had to click twice as it is removing the hash on first click and then click again to go to previous page, which is pretty annoying. Though there are tons of jQuery examples to achieve this i don't want to add jQuery and use just the JavaScript i have. Here is the code. Is there any way to remove "#" from the URL when i click the scroll to top anchor?. I tried changing the anchor tag to button as well but i could not manage to get it work. Pleas help.

HTML

<a href="#" class="back-to-top"><i class="bi bi-arrow-up-short"></i></a>

JS

(function () { /** * Easy selector helper function */ const select = (el, all = false) => { el = el.trim() if (all) { return [...document.querySelectorAll(el)] } else { return document.querySelector(el) } } /** * Easy event listener function */ const on = (type, el, listener, all = false) => { let selectEl = select(el, all) if (selectEl) { if (all) { selectEl.forEach(e => e.addEventListener(type, listener)) } else { selectEl.addEventListener(type, listener) } } } /** * Easy on scroll event listener */ const onscroll = (el, listener) => { el.addEventListener('scroll', listener) } /** * Back to top button */ let backtotop = select('.back-to-top') if (backtotop) { const toggleBacktotop = () => { if (window.scrollY > 100) { backtotop.classList.add('active') } else { backtotop.classList.remove('active') } } window.addEventListener('load', toggleBacktotop) onscroll(document, toggleBacktotop) } })();

Does this answer your question? How to prevent default event handling in an onclick method? — evolutionxbox
– evolutionxbox, Commented Oct 20, 2021 at 9:23
Might this help? developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo — insyri
– insyri, Commented Oct 20, 2021 at 9:25
@ evolutionxbox too good for me to understand it as said I am a rookie. — Anil kumar
– Anil kumar, Commented Oct 20, 2021 at 10:05
Arman and insyri both of your js may work but not without fiddling my show hide visibility of the anchor. Thanks for the answers though — Anil kumar
– Anil kumar, Commented Oct 20, 2021 at 10:06

D-Money · Accepted Answer · 2021-10-20 09:39:17Z

To prevent the # being added to the url you can use preventDefault to prevent the default anchor link behaviour:

document.querySelector('a').addEventListener('click', (event) => { event.preventDefault(); window.scrollTo(0, 0); });

.spacer { width: 100%; height: 150vh; border: 1px dashed black; }

<div class="spacer"></div> <a href="#">Back to Top</a>

or use window.scroll for native smooth scrolling behaviour (but be wary of the browser support)

document.querySelector('a').addEventListener('click', (event) => { event.preventDefault(); window.scroll({ top: 0, behavior: 'smooth' }); });

.spacer { width: 100%; height: 150vh; border: 1px dashed black; }

<div class="spacer"></div> <a href="#">Back to Top</a>

FYI: Smooth scroll can also be added via CSS: html:focus-within { scroll-behavior: smooth; }

RoToRa · Accepted Answer · 2021-10-20 09:27:05Z

You can use JavaScript to scroll to the top:

backtotop.addEventListener("click", () => { window.scrollTo({top: 0}); return false; });

Miheo · Accepted Answer · 2021-10-21 03:58:14Z

0

Does this answer to your question ?

Make an onClick function with this sample:

window.scrollTo(0, 0);

edited Oct 21, 2021 at 3:58

Miheo

5139 silver badges19 bronze badges

answered Oct 20, 2021 at 9:26

TrommBolg

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Kay · Accepted Answer · 2022-05-23 01:24:22Z

I listen for hashtags with two listeners: one for within page navigation and one for when a page loads (in the event another page links to a hashed target on a different page).

The hashchange listener removes the hash for within page navigation, and the load listener removes the hash when pages switch.

These listeners remove the hash when "#" is used to scroll or jump to the top of a page. These listeners also remove all other hash tags as well.

The listeners can be adapted to retain parameters after the hash, if needed or desired.

I relied on this discussion: How to remove the hash from window.location (URL) with JavaScript without page refresh?

function removeLocationHash() { window.history.replaceState('', document.title, window.location.href.replace(/#.*$/, '')); } window.addEventListener('hashchange', function() { removeLocationHash(); }); window.addEventListener('load', function() { removeLocationHash(); });

Julian Espinel · Accepted Answer · 2025-01-14 15:48:43Z

Another whay to going to the top of the page without adding # to the URL is:

<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})">Back to top</button>

Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

This exact solution is already present in the accepted answer from 2021

Meher Ullah Khan Raj · Accepted Answer · 2021-10-20 09:27:25Z

-1

Use javascript:void(0) instead of #

It will work.

answered Oct 20, 2021 at 9:27

Meher Ullah Khan Raj

4571 gold badge7 silver badges14 bronze badges

1 Comment

Anil kumar Over a year ago

sorry it did not work. I have already tried adding javascript:; earlier none of them worked.

WindRunnerMax · Accepted Answer · 2021-10-20 09:33:17Z

Maybe you just want to prevent the default behavior.

document.querySelector(".back-to-top").addEventListener("click", (e) => { e.preventDefault(); })

Collectives™ on Stack Overflow

Javascript back to top without adding # to the URL

7 Answers 7

1 Comment

Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Linked

Related