Добрый день, делаю сайт на базе Бутстрапа с подключенным jQuery 3.4.1. Воспользовался сниппетом "Back to top", чтобы сделать кнопку, которая появляется в углу страницы при перемотке вниз, и при нажатии на которую можно анимированно отмотаться наверх страницы. Немного подправил под себя, вот код:
var $toTopBlock = $("#to-top-block");
if ($(this).scrollTop() < 150) {
$toTopBlock.hide();
}
$(window).on('scroll', function() {
if ($(this).scrollTop() > 150) {
$toTopBlock.fadeIn(500);
} else {
$toTopBlock.fadeOut(500);
}
});
var $backToTop = $("#to-top");
$backToTop.on('click', function(e) {
$("html, body").animate({scrollTop: 0}, 700);
});
Проблема в том, что у меня почему-то при скролле вниз сначала появляется кнопка полностью, а затем сразу же начинается анимация Fade In с заданными параметрами. Еще есть проблема с тем, что исчезает она тоже недостаточно плавно, но это не так критично в данный момент.
Очень долго гуглил, в т.ч., естественно, на английском, такое ощущение, что ни у кого такой проблемы не бывало. Из-за этого подозреваю, что может влиять что-то стороннее. Но помимо этого кода js у меня буквально 30 строчек, пробовал закомментировать - не помогло.
Вот верстка:
<div class="to-top-trigger" id="to-top-block">
<a class="to-top-link" id="to-top"></a>
</div>
.to-top-trigger {
position: fixed;
right: 20px;
bottom: 20px;
height: 64px;
width: 64px;
background-color: rgba(6, 86, 164, .8);
border-radius: 50%;
transition: .4s all ease;
overflow: hidden;
z-index: 100;
}
.to-top-trigger:hover,
.to-top-trigger:focus {
background-color: rgba(7, 98, 187, .8);
}
.to-top-link {
position: relative;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.to-top-link::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
background-image: url(../img/arrow-up-circle.svg);
background-repeat: no-repeat;
transform: translate(-50%, -50%);
}
