CSS 出现另一个元素时的滑动动画

Question

所以我刚开始建立我自己的第一个网站，刚刚发现一个问题，我认为可以使用 CSS 和 javascript 来解决，但我在互联网上没有找到任何东西，所以我在这里上午

我的问题包括以下内容。我有一个主题，当您在页面上向下滚动时，会出现一个按钮，单击该按钮会返回到该页面的顶部。我最近添加了一个名为“社交聊天”的插件，它允许任何进入该网站的人通过 WhatsApp 与我联系，我希望按钮位于页面的右下角，问题是滚动的位置相同按钮出现。

我可以用一个简单的 CSS 移动 WhatsApp 按钮，比如底部：70 PX，但感觉不够好，所以我的想法是让 WhatsApp 按钮在另一个按钮出现时向上移动，但我希望它是初始位置和最终位置之间的过渡，而不是直接移动。

下面是一些示例：

没有滚动按钮时： no scroll button

滚动按钮出现时： with scroll button

现在的情况： Actual situation

我不知道这个动画怎么做，所以如果有人能帮助我那就太好了。

Answer 1

此代码将帮助您尝试此操作。

 //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>

使用jquery向上滚动。

CSS 出现另一个元素时的滑动动画

CSS Sliding animation when another element appears

javascript

css

wordpress

animation