Luke Luke - 1 year ago 74
HTML Question

Call bootstrap to show hash link in url, when user clicks on page-scroll(anchor)

I'm using Bootstrap and its "page-scroll".

Page-scroll work properly, except when user clicks on menu item, the URL doesn't change.

For example when user clicks on menu item "PRODUCTS", I want that URL changes from to

Any solutions for this?

Answer Source

Yes, that's expected ... its the default behaviour of bootstrap scroll. You need to override the default behaviour with JQuery of your own.

Try the below JQuery code, I have already tested it on your website & works well.

In your scrolling-nav.js your .bind() should look like below

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 500, 'easeInOutExpo');
        window.location.hash = this.hash; //add only this line here

let me know if you have any doubts

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download