CSS Sliding animation when another element appears [closed]

So I just started building my first own website, and just found a problem that I think it can be solved using CSS and javascript, but I found nothing on the internet so here I am.

My problem consists of the following. I have a theme that, when you scroll down on a page, it appears a button that onclick goes back to the top of that page. I recently added the plugin named “Social Chat” that allows anyone who enters the website to contact me throw WhatsApp, and I want the button to be on the bottom right side of the page, the problem is that is the same place where the scroll button appears.

I could move the WhatsApp button with a simple CSS like bottom: 70 PX, but it doesn’t feel good enough, so my idea was to make the WhatsApp button move up when the other button appears, but I want it to be a transition between the initial position and the final one, not to move directly.

Here are some examples of how it should look:

When there is no scroll button: no scroll button

When scroll button appears: with scroll button

How it looks right now: Actual situation

I don’t know how to to this animation, so if anyone could help me it would be great.

Answer

This code will help you try this.

 //Get the button:
     mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button


$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#scroll').fadeIn();
        } else {
            $('#scroll').fadeOut();
        }
    });
    $('#scroll').click(function () {
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
body,
        html {
            margin: 0;
            padding: 0;
        }

        .back-to-top {
            position: fixed;
            /*display: none;*/
            background: #18d26e;
            color: #fff;
            width: 44px;
            height: 44px;
            text-align: center;
            line-height: 1;
            font-size: 16px;
            border-radius: 50%;
            right: 15px;
            bottom: 15px;
            transition: background 0.5s;
            z-index: 11;
        }

        .back-to-top i {
            padding-top: 12px;
            color: #fff;
        }

                            .float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:70px;
    right:10px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:30px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
    margin-top:16px;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <a href=""
                class="float" target="_blank">
    <i class="fa fa-whatsapp my-float"></i>
    </a>
    <div>
       




    </div>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias numquam itaque voluptatum quaerat adipisci accusamus molestias ipsum id, eius rerum aliquam, deserunt voluptate architecto cumque amet maxime. Totam, pariatur!</h1>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias numquam itaque voluptatum quaerat adipisci accusamus molestias ipsum id, eius rerum aliquam, deserunt voluptate architecto cumque amet maxime. Totam, pariatur!</h1>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias numquam itaque voluptatum quaerat adipisci accusamus molestias ipsum id, eius rerum aliquam, deserunt voluptate architecto cumque amet maxime. Totam, pariatur!</h1>     <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias numquam itaque voluptatum quaerat adipisci accusamus molestias ipsum id, eius rerum aliquam, deserunt voluptate architecto cumque amet maxime. Totam, pariatur!</h1>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias numquam itaque voluptatum quaerat adipisci accusamus molestias ipsum id, eius rerum aliquam, deserunt voluptate architecto cumque amet maxime. Totam, pariatur!</h1>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias numquam itaque voluptatum quaerat adipisci accusamus molestias ipsum id, eius rerum aliquam, deserunt voluptate architecto cumque amet maxime. Totam, pariatur!</h1>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias numquam itaque voluptatum quaerat adipisci accusamus molestias ipsum id, eius rerum aliquam, deserunt voluptate architecto cumque amet maxime. Totam, pariatur!</h1>

         

    <a href="" id='scroll' class="back-to-top">
        <i class="fa fa-chevron-up"></i>
       

    </a>

Use jquery to scoll up.