Вот и сам код.
<script type="text/javascript">
jQuery(function(f){
var element = f('#back-top');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);
});
});
</script>
Данный код нужно подключать после библиотеке jQuery. Выглядит строка подключения примерно так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>Если нет такого то добавьте.
В третьей строке задается id элемента который мы будем показывать. У меня это #back-top, вы можете подставить тот что Вам нужно. В пятой строке задается еще два свойства. Первое это высота от верхней границы, когда появляется блок. В данном случаи это 200 пикселей. Второе свойство это время появления или время эффекта, то есть время за которое появится элемент. В данном примере это 500 миллисекунд, то есть пол секунды, если надо дольше то меняйте. Так же блоку должно быть добавлено в стилях свойство display:none;
Данный блок должен быть плавающим, то есть фиксированным. В примере в начале статьи, блоку добавлены следующие обязательные стили
#back-top{
position:fixed;
display:none;
}
Если вы нигде не ошиблись и ничего не перепутали, то можете проверить результат. При прокрутке, в заданном месте Ваш блок появится во всей красоте 🙂
На этом все, спасибо за внимание 🙂
