Change the url query string or append if not exist when click on a link without reload the page

Question

I'm trying use the jQuery to change the url query string without reload the page, the link may be like this www.example.com/innerpage?tab=xyz&para=abc .. I want to append these queries when click on a links inside that innerpage. So when copy the link and share with other I'll read these queries to open the targeted section again!

function getParameterByName(name) {
      url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
          results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));
}

$('.alink').click(function(e){
   e.preventDefault();
   var _link = $(this);
   var _target = _link.attr('href').substr('1');
 var target = $('div[id="'+_target+'"]');
  $('html, body').animate({
          scrollTop: target.offset().top
        }, 500);


    var urlq = getParameterByName('tab');
    if(urlq != null){
        location.href.replace("tab="+urlq, "tab="+_target);
    } else {
        location.href+= "?tab="+_target;
    }
    console.log(urlq);
});

check out my code on my codepen

Vytaliy Makovyak · Accepted Answer · 2017-07-15 22:16:20Z

1

  var queryString = 'yourblock1';
  var pageUrl = '?' + queryString;
  window.history.pushState('', '', pageUrl);

But after reloading you should check parameters and scroll to block using js.

edited Jul 15, 2017 at 22:16

answered Jul 15, 2017 at 22:11

Vytaliy Makovyak

987 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3003810 Over a year ago

Yeah I already did the scrolling after reading the query string .. thanks!

Collectives™ on Stack Overflow

Change the url query string or append if not exist when click on a link without reload the page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related