我不知道如何使HTML页面滚动到URL的特定字符串。
例如:如果用户输入
HTML页面包含许多基于用户在URL中提供的UTC值的时间值,页面应该滚动到用户在URL中提供的UTC值。
请问您能否建议如何在HTML、JavaScript等中实现这个功能?
我不知道如何使HTML页面滚动到URL的特定字符串。
例如:如果用户输入
HTML页面包含许多基于用户在URL中提供的UTC值的时间值,页面应该滚动到用户在URL中提供的UTC值。
请问您能否建议如何在HTML、JavaScript等中实现这个功能?
尝试下面的代码:
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 中的 1234567890 替换为相应的 utc 值
使用 URL searchParams
和 scrollIntoView()
方法。
在 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>
<script></script>
标签中,在闭合的</body>
标签之前即可。 - imhvost基本上,只要锚点链接包含在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>