Question 42669 in Html Question posted in
Some basic documentation can be found here.

scroll the html page based on query string given in url

I dont know how to make the html page to scroll to particular string being part of url.

For eg: if suppose user gives

The html page contains lot of utc time values, based on user given value of utc in url, the page should scroll to that utc which user has given in url.

Can you please suggest on how to do this in html, javascript etc?

Tags:

3

Answers


  1. 0

    Try the below code:

    var vars = [],
  hash = '';
var hashes = window.location.href;
var decodedurl = decodeURIComponent(hashes);
var newurl = decodedurl.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < newurl.length; i++) {
  hash = newurl[i].split('=');
  console.log(hash);
  vars[hash[0]] = hash[1];
}

setTimeout(function() {
  if (vars['utc'] !== undefined && vars['utc'] == '1234567890 ') {
    const element = document.getElementById("utc_1234567890");
    element.scrollIntoView({ behavior: 'smooth'});
  }
}, 3000);

    Replace utc_1234567890 in the code with your div element id to scroll to and replace 1234567890 with the respective utc value in the URL

    Login or Signup to reply.
  2. 0

    Use URL searchParams and scrollIntoView() method.
    Working example on codepen.
    In the example below, there will be scrolling to the block if the url contains ?utc=123:

    ;(() => {
  const params = ( new URL(location.href) ).searchParams;
  const id = params.get('utc');
  const block = document.getElementById(`utc-${id}`);
  if (block) {
    setTimeout(() => block.scrollIntoView({ behavior: 'smooth' }), 20)
  }
})();
    /* for testing */
#utc-123 {
  margin: 100vh 0;
}
    <div id="utc-123">utc-123</div>
    Login or Signup to reply.
  3. 0

    Basically, your browser would automatically jump to the anchor link as soon as it is contained in the url. i.e. ?utc=7 automatically jumps to the place in the DOM where the anchor is set when you call up the link. So to the place <div id="7">Hello World</div>. If you manipulate the url in a spa application, it is of course possible that the browser does not immediately jump to the location. here you can trigger this via the js location api or you simply trigger a page reload 😉 (the easiest way).

    Here is a short example on the topic of anchors in general.

    const navLinks = document.querySelectorAll('a');

navLinks.forEach(a => {
  a.addEventListener('click', e =>  {
    const tgt = e.target.getAttribute('href')
    alert("jump to:" + tgt)
  })
});
    .page {
  height: 100vh;
}

ul {
  position: fixed;
  background: green;
}

section {
  border-bottom: 3px solid red;
  height: 50%;
  background-color: yellow;
  margin-bottom: 10px;
}
    <div class="page">
  <ul>
    <l><a href="#1">1</a></li>
    <l><a href="#2">2</a></li>
    <l><a href="#3">3</a></li>
    <l><a href="#4">4</a></li>
  </ul>
  <section id="1">1</section>
  <section id="2">2</section>
  <section id="3">3</section>
  <section id="4">4</section>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search