How to hide # hash in a url using js

I have a scroll plugin that uses my div ID to scroll to a specific anchor,

It's creating urls like this: http://example.com/#examplediv|700

I want to find a way using js or any other suggested method to hide the hash in the url

I want to transform this: http://example.com/#examplediv|700 into this: http://example.com/

Any ideas?

Answers:

Answer

You can either modify the scroll plugin you are using or add it yourself on the side but you will want to do something like this:

Assumption: All DIVs that you are concerned with regarding this scrolling will need to have the anchor-scrolls class.

HTML

<a href="#anchor-hash" class="anchor-scrolls">foo</a>

JS

//using jQuery
(function($){
   $('.anchor-scrolls').on('click', function(evt){
      evt.preventDefault(); //prevents hash from being append to the url
   });
)(window.jQuery);
Answer

The hash is in the location.hash property. Just set it to the empty string. If you need to use it in the rest of your code, you can save it in another variable first.

var saved_hash = location.hash;
location.hash = '';
Answer

You can remove it, save it and scroll to the anchor, which has the same effect.

// Add smooth scrolling to links
$(".anchor-link").on('click', function(event) {

 // Prevent default anchor click behavior
 event.preventDefault();

 // Store hash
 var hash = this.hash;

 // Using jQuery's animate() method to add page scroll
 // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 $('html, body').animate({
   scrollTop: $(hash).offset().top
 }, 800);

});

But works only for anchors at the same page. What if the anchor is at a different page?

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.