问题：

它适用于桌面，但在移动设备上，按钮立即显示，没有平滑效果，等待滚动动作停止。
它从底部到顶部显示在手机上。保持平稳的效果。

Here你可以看到我的意思。我想在所有浏览器上获得真正流畅的效果，你能帮助我吗？

HTML：

<!DOCTYPE html>
<html lang = "it-IT">
    <head>
        <meta name = "viewport" content = "width=device-width, initial scale=1.0">
    </head>
    <body>
        <h1>Testing JavaScript</h1>
        <p>Lorem ipsum dolor sit amet, consectetur...</p>
        <button id = "toTop" onclick = "goToTop()"><img... ></button>
        <script>
            var body = document.body;
            var toTop = document.getElementById("toTop");
            function goToTop() {
                body.scrollTop = 0;
            }
            window.addEventListener("scroll", function () {
                if (body.scrollTop > 400)
                    toTop.style.opacity = 1;
                else
                    toTop.style.opacity = 0;
            })
        </script>
    </body>
</html>

CSS：

#toTop {
    background-color: orange;
    outline: none;
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 10px;
    border-radius: 50%;
    opacity: 0;
    transition: 0.5s;
    border: 1px solid black;

    img {
        width: 2em;
        vertical-align: middle;
    }
}

在移动浏览器上，CSS属性的值仅在滚动结束时更改

问题：

0 个答案: