Chcę dokonać animacji z przyciskiem z JS po wyświetleniu przycisku. Użytkownik jest przewijany i gdy przewijanie ekranu osiąga 20px, wyświetlany jest przycisk. Widając, chcę, aby przycisk się przesuń do pewnej części ekranu, gdzie zostanie umieszczony, dopóki nie zostanie ukryty. To jest JS i HTML:

var to_top_button = document.getElementById("to-top-button");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        to_top_button.style.display = "block";
        to_top_button.style.transition = "all 90s";
    }else{
        to_top_button.style.display = "none";
    }
}
body{
  height: 500px;
}

#to-top-button{
  display: none;
    position: relative;
    height: 5vw;
    width: 5vw;
    background: yellow;
    position: fixed;
    margin-left: 88%;
    bottom: 3vw;
    font-size: 3vw;
    border-radius: 4vw;
    border: none;
    cursor: pointer;
    z-index: 50;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
  <button onclick="to_top()" id="to-top-button"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
</body>

Jak widać, gdy strona jest przewijana, wyświetlany jest przycisk. Chcę wykonać animację, gdy wyświetlany jest przycisk, chcę, żeby przesunąć się z prawej granicy ekranu za każdym razem, ale nie wiem, jak zrobić animacje na JS.

Jak mogę to zrobić? Dzięki!

0
user12886483 27 październik 2020, 19:43

1 odpowiedź

Najlepsza odpowiedź

Aby osiągnąć to, co chcesz, musisz najpierw ustawić swój przycisk z ekranu w prawo. Możesz osiągnąć to poprzez manipulowanie właściwą nieruchomością w CSS.

right: -5vw;

Po osiągnięciu żądanej pozycji przewijania zmień żądaną wartość.

right: 5vw;

Pełny kod będzie.

<style>
    body {
        height: 10000px;
    }

    #to-top-button {
        height: 5vw;
        width: 5vw;
        background: yellow;
        position: fixed;
        bottom: 3vw;
        right: -5vw;
        font-size: 3vw;
        border-radius: 4vw;
        border: none;
        cursor: pointer;
        z-index: 50;
    }
</style>


function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                to_top_button.style.right = "5vw";
                to_top_button.style.transition = "all 1s";
            } else {
                to_top_button.style.right = "-5vw";
            }
        }
0
Filipe 27 październik 2020, 17:12