CODEWITHSUNDEEP
javascripthtml
Anil kumar
Anil kumar

Reputation: 55

Javascript back to top without adding # to the URL

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)
      }
})();

Upvotes: 2

Views: 710

Answers (7)

Julian Espinel
Julian Espinel

Reputation: 3492

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

Upvotes: 0

Kay
Kay

Reputation: 51

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();
});

Upvotes: 0

TrommBolg
TrommBolg

Reputation: 1

Does this answer to your question ?

Make an onClick function with this sample:

window.scrollTo(0, 0);

Upvotes: 0

D-Money
D-Money

Reputation: 2465

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>

Upvotes: 3

WindRunnerMax
WindRunnerMax

Reputation: 109

Maybe you just want to prevent the default behavior.

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

Upvotes: -1

Meher Ullah Khan Raj
Meher Ullah Khan Raj

Reputation: 449

Use javascript:void(0) instead of #

It will work.

Upvotes: -1

RoToRa
RoToRa

Reputation: 38400

You can use JavaScript to scroll to the top:

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

Upvotes: 0

Related Questions