I have implemented a smooth scroll technique found here: https://css-tricks.com/snippets/jquery/smooth-scrolling/#comment-197181
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -104
}, 1000);
return false;
}
}
});
});
The technique works well for one-page site navigation, however, the browser's address bar does not update with the correct hash URL. For example, when navigating from domain.com to domain.com#foo, although it goes to the section id foo, the address bar still shows domain.com as the URL without #foo at the end.
Is there a way to automatically update the URL with the hash as the user navigates through the page?
In addition, I would like to implement adding an active class to the navigation bar to highlight the section that the user is currently on. This means that when they click a link to #foo, the class "active" should be automatically added. As they scroll away to another section, it should then be removed.
Any assistance with this would be greatly appreciated. Modifying existing JQuery code is not my area of expertise, so any guidance would be helpful.
Thank you!