1

I am using jQuery to implement a smooth scroll effect on my internal anchor links. I am wondering if it is at all possible to have the sites url reflect the anchor link name without its preceding hash symbol.

Essentially displaying www.site/link1.com instead of www.site/#link1.com in the address bar.

I've tried searching this question all over google and haven't come up with any concert fact as to whether this can or cannot be achieved.

Ganesh Yadav
  • 2,607
  • 2
  • 29
  • 52
T Race
  • 115
  • 1
  • 3
  • 9
  • `#` is used to indicate a link within the page. You need to indicate where in the page to scroll to, particularly if you are going to link with from an external source. This is where `#` comes in. This also automatically handled browser history, so forward and back buttons also work with smooth scroll. – Jon P Feb 22 '18 at 05:43
  • I understand its use for indicating internal links, however I am asking if it is possible to keep their functionality but remove them from the address bar. So possibly updating the address bar by removing the hash after you use it to smooth scroll. – T Race Feb 22 '18 at 05:52

3 Answers3

0

I think you are using an id into the jquery code which moves you from one section to other into the page. So instead of giving the id if you can move using the specific class name then the hashtag can be avoided. As because ids are taken as #id_name so after scrolling it is showing the total id name in the url. Try this way, and i think it will give you the result.

SOUVIK DEY
  • 13
  • 5
0

I can't add comment, but your answer is probably already answered over here, at least it helped me when I needed it: append /remove anchor name from current url without refresh

Leo Odishvili
  • 1,004
  • 1
  • 7
  • 29
0

Just DID something similar in past, snippet from my code below code is using for scrolling just past div id

function topScroll(id) {

     $('html, body').animate({
          scrollTop: $('#' + id).offset().top - 150
     }, 1000);

}

And On Every Scroll Hit I'm Removing #Link 

function Redirect() {
history.pushState("", document.title, window.location.pathname);//remove #section

 }

use both Functions One by One On every click

Ahsan Aziz Abbasi
  • 168
  • 13