javascript 根据url中给出的查询字符串滚动html页面

hgc7kmma  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(135)

我不知道如何使HTML页面滚动到特定的字符串是URL的一部分。
例如:假设用户给出

html页面包含很多utc时间值,基于用户在url中给出的utc值,页面应该滚动到用户在url中给出的utc。
你能建议如何在html,javascript等中做到这一点吗?

uhry853o

uhry853o1#

使用URL searchParamsscrollIntoView()方法。

Working example on codepen

在下面的示例中,如果url包含?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>
rqdpfwrv

rqdpfwrv2#

基本上,你的浏览器会自动跳转到锚链接,只要它包含在url中。即?utc=7自动跳转到DOM中的地方,当你调用链接时锚被设置。所以到<div id="7">Hello World</div>的地方。如果你在spa应用程序中操作url,当然也有可能浏览器没有立即跳转到该位置。这里你可以通过js location API触发它,或者你简单地触发一个页面重新加载;- )(最简单的方法)。
这里有一个关于锚的简短例子。

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>
7cwmlq89

7cwmlq893#

试试下面的代码:

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);

将代码中的utc_1234567890替换为您的div元素id以滚动到URL中的相应utc值,并将1234567890替换为URL中的相应utc值

相关问题