Блог

Главная - Вопросы по программированию - Как сосредоточиться на определенной части веб-страницы с помощью JavaScript?

Как сосредоточиться на определенной части веб-страницы с помощью JavaScript?

#javascript #html #javascript-events

#javascript #HTML #дом-события #dom-события

Вопрос:

Кто-нибудь может сказать мне, как сосредоточиться на определенной части веб-страницы с помощью событий JavaScript? Допустим, я нажал кнопку, и она будет прокручиваться вниз или вверх до определенной части страницы. Вот мой неполный код:

 <html>
<head>
<script type="text/javascript">
 function focusOnForm() {
  document.getElementById('form').style.display = '';
 }
</script>
</head>
<body onload="document.getElementById('form').style.display = 'none';">
<div style="height: 900px; width: width: 500px; background-color: #000;">
</div>
<br />
<input type="button" value="Add" style="float: right;" onclick="focusOnForm();" />
<br />
<div id="form">
 First Name: <input type="text" /> <br />
 Last Name: <input type="text" /> <br />
 Address: <input type="text" /> <br />
 Contact Number: <input type="text" /> <br />
 Email: <input type="text" /> <br />
</div>
</body>
</html>

Мне действительно нужна помощь.

Ответ №1:

Используйте .scrollIntoView() метод:

  function focusOnForm() {
    var form = document.getElementById('form');
    form.style.display = '';
    form.scrollIntoView();
 }

Скрипка: http://jsfiddle.net/g8Mqr /

Комментарии:

1. Есть ли способ, которым я могу указать местоположение?

2. ДА. Можно указать необязательный аргумент. Если значение true, форма будет выровнена по верху. В противном случае (по умолчанию) элемент будет выровнен по низу.

Ответ №2:

Вы можете перейти к местоположению в пикселях с помощью:

 document.body.scrollTop = 2000;

http://jsfiddle.net/ThinkingStiff/A7JMZ/