Автоматический скролл к низу страницы

240
03 сентября 2018, 17:00

Нужно чтобы скролл прокручивался к самому низу страницы вместе с анимацией.

$service = '<div style="display:none;">Сервисный текст</div>'; 
$desc = '<div style="display:none;">Описание</div>'; 
 
function add() { 
  $("#feed").append($service); 
  $("#feed > div:last-child").show('fast', () => { 
    $("#feed").append($desc); 
    $("#feed > div:last-child").slideDown('fast') 
  }); 
  document.documentElement.scrollTop = document.documentElement.scrollHeight; 
}
body { 
  overflow-y: scroll; 
} 
 
#feed>div { 
  padding: 10px; 
  border: 1px solid silver; 
  background: lightblue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button style="position:fixed;top:0;" onclick="add();">Добавить текст</button> 
<div id="feed"></div>

Answer 1

$service = '<div style="display:none;">Сервисный текст</div>'; 
$desc = '<div style="display:none;">Описание</div>'; 
 
function add() { 
  $("#feed").append($service); 
  $("#feed > div:last-child").show(300, () => { 
    $("#feed").append($desc); 
    $(document.documentElement).animate({ scrollTop: document.documentElement.scrollHeight }, 300); 
    $("#feed > div:last-child").slideDown(500) 
    $(document.documentElement).animate({ scrollTop: document.documentElement.scrollHeight }, 500); 
  }); 
}
body { 
  overflow-y: scroll; 
} 
 
#feed>div { 
  padding: 10px; 
  border: 1px solid silver; 
  background: lightblue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button style="position:fixed;top:0;" onclick="add();">Добавить текст</button> 
<div id="feed"></div>

Answer 2

В параметр scrollTop можно предать координаты футера или последнего блока на странице. Я решил передать 10000px только лишь для наглядности.

$('.scroll').click(function(){ 
		$('.content').slideDown('slow', function(){ 
    	$("html, body").animate({ scrollTop: 10000 }, 1000); 
    	return false; 
    }); 
}); 
 
//or 
 
$('.scroll').click(function(){ 
		$('.content').slideDown('slow'); 
    $("html, body").animate({ scrollTop: 10000 }, 1000); 
    	return false; 
});
.content{ 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class='scroll'>Tap me and scroll</button> 
<div class='content'> 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dicta error porro aliquid eveniet voluptatem eaque saepe laudantium id. Illo, cupiditate ipsa earum neque voluptatem eos id! Porro, mollitia. 
</div>

READ ALSO
Полиморфные связи в Entity Framework
c#

Полиморфные связи в Entity Framework

Есть, скажем, таблица Attachments со столбцами: id | ownerId | ownerType, которые, соответственно: первичный ключ, внешний ключ и таблица, к которой относится...

 317
Как &ldquo;присвоить&rdquo; функцию в переменную?
c#

Как “присвоить” функцию в переменную?

Здравствуйте как "присвоить" функцию в переменную:

 217
Фильтры с DI в ASP.NET Core
c#

Фильтры с DI в ASP.NET Core

В чем отличие ServiceFilterAttribute от TypeFilterAttribute? Ну кроме того что второй не надо регистрировать в контейнереИ где какой использовать?

 241
Разветвление сайта
c#

Разветвление сайта

Представьте ситуацию, когда при входе на сайт выдается модальное окно и спрашивает вы хотите перейти на сайт кока кола или пепси? При клике...

 258