Прокрутите html-страницу на основе строки запроса, указанной в URL-адресе
Я не знаю, как заставить html-страницу прокручивать определенную строку, являющуюся частью URL-адреса.
Например: если предположим, что пользователь дает
HTML-страница содержит множество значений времени utc, основанных на заданном пользователем значении utc в URL-адресе, страница должна прокручиваться до того utc, который пользователь указал в URL-адресе.
Не могли бы вы предложить, как это сделать в html, javascript и т.д.?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Попробуйте следующий код:
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.info(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, чтобы прокрутить его, и замените 1234567890 соответствующим значением utc в URL-адресе.
Спасибо за ваше время в ответ. В моем проекте не используется jquery, поэтому я не могу попробовать приведенный выше фрагмент кода. Я могу просто использовать простой javascript, и мой проект использует jsp для создания html-страницы.
Я обновил код до javascript. Пожалуйста, отметьте ответ как принятый, если он работает
Используйте метод 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>Спасибо .. я использую jsp для создания html-страницы, я пытаюсь найти, как вызвать приведенный выше фрагмент кода (то есть код javascript) из моего jsp. Я пробовал window.onload(), но почему-то этот window.onload() не вызывается. Если есть какие-либо идеи, пожалуйста, поделитесь по этому поводу.
Просто добавьте этот код в тег <script></script> в самом низу страницы перед закрывающим тегом </body>.
По сути, ваш браузер автоматически перейдет к якорной ссылке, как только она появится в URL-адресе. то есть ?utc=7 автоматически переходит к месту в DOM, где установлен якорь, когда вы вызываете ссылку. Так что к месту <div id = "7">Hello World</div>. Если вы манипулируете URL-адресом в спа-приложении, возможно, что браузер не сразу перейдет к этому местоположению. здесь вы можете вызвать это через API местоположения js или просто вызвать перезагрузку страницы ;-) (самый простой способ).
Вот небольшой пример на тему анкоров в целом.
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>
Дубликат: stackoverflow.com/a/63887613/1307020