hash url - Tutorial Shares

Smooth Page Scroll to Div on Same Page

Feb 10, 2025 by Christine Cardoso in Javascript

164

Using hash tags to reference different parts of a page? Use this snippet to make the scroll to page smooth and to remove the hash tag that automatically gets appended to the url in the browser window.

$(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
        }, 1000);
        return false;
      }
    }
  });
});

$(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

}, 1000);

return false;

}

});

If url hash :target is active add active class to li link

Feb 7, 2025 by Christine Cardoso in Javascript

167

Creating a navigation list where you link to different parts of your web page? Want to set different styling to the active navigation link for the hash tagged url? It’s easy to style the div that is active in CSS3 … Continued