Нижняя граница окна
 

Здравствуйте, подскажите пожалуйста, что нужно указать в коде, чтобы элемент всегда появлялся снизу страницы. На данный момент для определения нижней границы в коде js используется

document.body.scrollHeight

Есть сомнения по поводу данного способа, подскажите более корректный способ для данного случая.

Код:

https://jsfiddle.net/5ro06noz/

Webrow,
position: fixed;
js не нужен.

CSS - position: fixed; //left/bottom

Для анимации передвижения элемента js вообще не нужен? Покажите пожалуйста пример начинающему, как это в css реализовать для моего случая, чтобы css полноценно заменил работу скрипта. Может в вопросе неправильно выразился, мне нужно чтобы элемент появлялся снизу экрана, независимо от положения скролла на странице.

Webrow,
Конкретизируй условие

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

Чтобы так плавно опускался никак без JS, остальное можно!

Хорошо, значит js оставляем, но как указать в js нижнюю границу экрана, чтоб из-за нее появлялся элемент без применения

document.body.scrollHeight

?

Как тут любят говорить конкретизируй вопрос. То у тебя плавно появлялся, то плавно опускался.
Первое легко через свойство css: opacity, второе только через js.

document.body.scrollHeight

заменить на

window.innerHeight;