One page scrolling links dont show anker in url

Question

What I have is this:

$(document).ready(function(){$('a[href^="#"]').on('click',function(e){e.preventDefault();var t=$(this.hash).offset().top;$('.wrapper').animate({scrollTop:t,},1000)})});

and actually place divs everywhere as a reference such as:

<div id="about"></div>

It actually scrolls down to those reference points but I dont see the name in the url. When I scroll down and end up in the about section I want it to somehow show up like this www.site.com/#about

Any idea what I am doing wrong? The site used is a HTML document.

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

You can use Html5 History API Good tutorial for using HTML5 History API (Pushstate?)

$(document).ready(function() {
  $('a[href^="#"]').on('click',function(e) {
    e.preventDefault();
    var t = $(this.hash).offset().top;
    $('.wrapper').animate({ scrollTop:t }, 1000);
    history.pushState(null, null, location.href + $(this).href); // <- not sure whether your links are relative or absolute.. do change appropriately..
  })
});

edited May 23 '17 at 11:57

Community

1
1

answered Oct 09 '14 at 06:46

Lee Gary

2,221
2
18
37

Hi, I keep getting undefined. What am I doing wrong? my links are absolute. – Zack Oct 09 '14 at 08:54
what browser are you using? and can you create a fiddle or edit your question to include the html, as your scripts are using `'a[href^="#"]'` but your question are giving this example: `
` – Lee Gary Oct 09 '14 at 09:00

score 0 · Accepted Answer · answered Oct 09 '14 at 07:11

give a try to this

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var target = this.hash;
        var t = $(this.hash).offset().top;
        $('.wrapper').animate({
        scrollTop: t,
        }, 1000, function () {
            window.location.hash = target;
        });
    });
});

One page scrolling links dont show anker in url

2 Answers2