1

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

$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>

2
  • есть какие-нибудь свои идеи?)
    – C.Raf.T
    12 июл 2018 в 14:27
  • Только если добавлять таймер с проверкой каждые 10мс и доскролливать. Вот только я не знаю как это написать >_>
    – Kodek
    12 июл 2018 в 14:29

2 ответа 2

2

$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>

2
  • Ну не. В смысле - да, он доскролливает теперь до низу. Но без учета анимации. Т.е. резко, а не плавно проскролливает вместе с анимацией. Мне надо добавлять абзацы текста и они должны появляться плавно, а не резко выпрыгивать. В таком варианте с резким добавлением мне бы и анимация нужна не была.
    – Kodek
    12 июл 2018 в 14:42
  • @Kodek можно так..
    – C.Raf.T
    12 июл 2018 в 14:52
1

В параметр 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.