我不知道如何使HTML页面滚动到特定的字符串是URL的一部分。例如:假设用户给出
html页面包含很多utc时间值,基于用户在url中给出的utc值,页面应该滚动到用户在url中给出的utc。你能建议如何在html,javascript等中做到这一点吗?
uhry853o1#
使用URL searchParams和scrollIntoView()方法。
URL searchParams
scrollIntoView()
Working example on codepen。
在下面的示例中,如果url包含?utc=123,则会滚动到块:
?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>
rqdpfwrv2#
基本上,你的浏览器会自动跳转到锚链接,只要它包含在url中。即?utc=7自动跳转到DOM中的地方,当你调用链接时锚被设置。所以到<div id="7">Hello World</div>的地方。如果你在spa应用程序中操作url,当然也有可能浏览器没有立即跳转到该位置。这里你可以通过js location API触发它,或者你简单地触发一个页面重新加载;- )(最简单的方法)。这里有一个关于锚的简短例子。
<div id="7">Hello World</div>
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>
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值
3条答案
按热度按时间uhry853o1#
使用
URL searchParams
和scrollIntoView()
方法。Working example on codepen。
在下面的示例中,如果url包含
?utc=123
,则会滚动到块:rqdpfwrv2#
基本上,你的浏览器会自动跳转到锚链接,只要它包含在url中。即?utc=7自动跳转到DOM中的地方,当你调用链接时锚被设置。所以到
<div id="7">Hello World</div>
的地方。如果你在spa应用程序中操作url,当然也有可能浏览器没有立即跳转到该位置。这里你可以通过js location API触发它,或者你简单地触发一个页面重新加载;- )(最简单的方法)。这里有一个关于锚的简短例子。
7cwmlq893#
试试下面的代码:
将代码中的utc_1234567890替换为您的div元素id以滚动到URL中的相应utc值,并将1234567890替换为URL中的相应utc值