Prevent the button from showing the hash symbol and the id name in the browser URL in pure JavaScript

Question

I click on the p tag button call go-to-the-end and it takes me to a certain section of the page but it changes the url. For example before the click occurs the browser url looks like this www.example.com/test.html after I press the button it changes the browser url to www.example.com/test.html#end I

don't want my url to change by showing the hash symbol and the id name so I basically want to press the button and the url does not change but it still takes me to a certain location on the page so how can I do this in pure JavaScript?

I found posts on this topic on this website but the ones I found are based on jQuery. I need an example in pure JavaScript.

Here is my code

document.querySelector('#go-to-the-end').addEventListener('click',goToTheEnd);

function goToTheEnd(){

document.location = '#end';
  
}

#go-to-the-end{
  color: white;
  font-weight: bold;
  background-color: red;
  padding: 5px;
  display: inline-block;
  border-radius: 8px;
  cursor: pointer;
}

#random-info{
  width: 100px;
}

<p id='go-to-the-end'>Go to the end</p>

<p id='random-info'>
  Three years after the second season of Batman: The Animated Series ended production, the show was moved from Fox to The WB network, which was airing and producing Superman: The Animated Series. These shows were merged as part of an hour-long segment called The New Batman/Superman Adventures. The WB wanted more episodes of Batman, so 24 new episodes were produced, which featured a different format and more focus on Batman's supporting cast.

In addition to the network's demands, the producers decided to make the show match the graphic style of Superman, so all the characters and objects were redesigned as more "animation friendly" with fewer lines, usually referred to by the fans and creative staff as the "revamp" (or alternately, the "new look"). A similar graphic style was used in the rest of the DCAU later on.

The entire series was released on DVD as Batman: The Animated Series Volume Four (From The New Batman Adventures), most likely to establish the connection with the original series.
</p>

<p id='end'></p>

Use `scrollIntoView()` https://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url — chintuyadavsara, Oct 12 '18 at 05:28

score 2 · Accepted Answer · answered Oct 12 '18 at 05:28

You can call scrollIntoView() on the element you want to scroll to, which does not require a window.location change:

document.querySelector('#go-to-the-end').addEventListener('click',goToTheEnd);

function goToTheEnd(){
  document.querySelector('#end').scrollIntoView();
}

#go-to-the-end{
  color: white;
  font-weight: bold;
  background-color: red;
  padding: 5px;
  display: inline-block;
  border-radius: 8px;
  cursor: pointer;
}

#random-info{
  width: 100px;
}

<p id='go-to-the-end'>Go to the end</p>

<p id='random-info'>
  Three years after the second season of Batman: The Animated Series ended production, the show was moved from Fox to The WB network, which was airing and producing Superman: The Animated Series. These shows were merged as part of an hour-long segment called The New Batman/Superman Adventures. The WB wanted more episodes of Batman, so 24 new episodes were produced, which featured a different format and more focus on Batman's supporting cast.

In addition to the network's demands, the producers decided to make the show match the graphic style of Superman, so all the characters and objects were redesigned as more "animation friendly" with fewer lines, usually referred to by the fans and creative staff as the "revamp" (or alternately, the "new look"). A similar graphic style was used in the rest of the DCAU later on.

The entire series was released on DVD as Batman: The Animated Series Volume Four (From The New Batman Adventures), most likely to establish the connection with the original series.
</p>

<p id='end'></p>

Prevent the button from showing the hash symbol and the id name in the browser URL in pure JavaScript

1 Answers1