Hi there, There is another HTML here.
There is a one-click scroll to the top arrow, which is an SVG
.
the markup is like this →
Current situation:
.arrowScrollUp {
position: fixed;
bottom: 1.25em;
right: 1.25em;
width: 3.125em;
height: 3.125em;
text-decoration: none;
animation-name: scrollup;
animation-duration: 1s;
}
@keyframes scrollup {
0% { right:0;}
100% { right:1.25em;}
}
In this also I was trying to get rid of keyframe animation
because animation is one-sided, when disappearing the disappearance is immediate and sudden.
I tried something like this:
#arrowScrollUp {
bottom: 1.25em;
display: block;
position: fixed;
width: 3.125em;
height: 3.125em;
transform: translateX(100vw);
transition: transform 1s ease;
}
.arrowScrollUp {
position: fixed;
bottom: 1.25em;
right: 1.25em;
width: 3.125em;
height: 3.125em;
transform: translateX(0vw);
}
It is JS which is injecting extra class:.arrowScrollUp
when the condition is true, is discussion was done here →