Luke Luke - 20 days ago 8
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 http://dev01-www.erisata.lt/en to http://dev01-www.erisata.lt/en#products

Any solutions for this?

Answer

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() {
    $('a.page-scroll').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
        event.preventDefault();
    });
});

let me know if you have any doubts

Comments