Как автоматом при загрузке страницы перемотать div вниз?

Question

[Марк Ешкилев]

Здравствуйте! есть такой код

<div style="float: right; width: 100%; ">
		<div style="background-color: #f5f5dc; overflow: auto;max-height: 450px;">
			<div id="mydiv">
				<center><p style="margin:0;font-size:25px;">Ожидайте...</p></center>
			</div>
		</div>
		<script>
			var intervalID = setInterval(myCallback, 500);
			function myCallback()
			{
				$.get('/corp/file.php', function(data) {
			        $('#mydiv').html(data);
			    });
			}
		</script>
		
		<form method="post">
			<div class="input-group mb-2 mr-sm-2" style="margin-top: 10px;">
				<input type="text" class="form-control" name="text" id="text" placeholder="Введите сообщение" required>
				<div class="input-group-prepend">
				    <div><button name="send" class="btn btn-success" type="submit" style="color: black; text-decoration: none;">Отправить</a></div>
				</div>
			</div>
		</form>
	</div>

как можно сделать так чтобы при загрузке страницы div с id mydiv автоматом перематывался вниз?

Comments

[Alice]

Что значит перематывался?

[Марк Ешкилев]

Alice, в плане чтобы скролл дива был внизу, типо вот так

Answer 1

[Serge999111]

Вам нужна функция загрузки документа. и затем указываете прокрутку до нужно div. Без js это сделать, на сколько я знаю, не возможно.

window.onload = function() { 
  $('html, body').animate({
     scrollTop: $('#doetogodiva').offset().top
       }, 500 
   );
}

А если по клику на ссылку/кнопку через элементарный якорь.

Comments

[Марк Ешкилев]

почему то не хочет работать...

window.onload = function() { 
  $('html, body').animate({
     scrollTop: $('#mydiv').offset().top
       }, 500 
   );
}

[Serge999111]

https://jsfiddle.net/eo4ksu1w/

[Alexey Hog]

И не будет работать потому, что задача у автора совсем другая. Он, правда, почему-то не хочет об этом сказать.
Попробую угадать.
У него на странице есть блок, в который через ajax загружаются сообщения. Типа чат такой.
Если высота загружаемого контента больше 450px, то естественно появляется scroll, при этом scroll находится вверху блока и последних сообщений не видно.
Задача:
1. Перемотать scroll вниз после загрузки сообщений, а не после загрузки страницы, т.к. блок ещё пустой.
2. Если сообщения отправляются axaj (у автора этого в коде нет, но он будет делать это 99.9%), то нужно перематывать scroll вниз после каждой отправки сообщения.
3. Перематывать scroll вниз, когда подгружается новые сообщения, если при этом позиция scroll была внизу, а не где-то по середине.

Вот как-то наверное так. Могу ошибаться.

[Serge999111]

Alexey Hog, И правда действительно чат. так как в комментарии под самим вопросом, есть занятный комментарий с изображением явно напоминающий чат.

[Serge999111]

Если это действительно чат. Скорее всего Вам надо заделать функцию новых сообщений, или функцию последнего сообщения. И уже скролить до этого сообщения.

Лучше всего, как мне кажется. скролить не до последнего НОВОГО сообщения. а до ПЕРВОГО нового НЕПРОЧИТАННОГО сообщения. Чтобы пользователь не пропустил новых сообщений. Но это на вкус и цвет...

Самый простой способ, это написать функцию последнего сообщения и скролить до него после подгрузки сообщений.