怎么在离开顶部的时候显示浮动操作按钮和点击回顶部事件

离开顶部显示FAB和“点击回顶部事件”：

<button class="mdui-fab mdui-fab-hide">买</button>
<div class="mdui-hidden">点击回顶部</div>
<script>
    addEventListener('scroll', () =>
        scrollY && //scrollY > 0
        document.querySelector('.mdui-fab-hide').classList.remove('mdui-fab-hide') || //remove方法返回undefined
        document.querySelector('.mdui-hidden').classList.remove('mdui-hidden')
    );
</script>

划过（即在此元素上方）某一区域触发事件：

<!--父元素是 body-->
<header class="mdui-appbar mdui-appbar-fixed"></header>
<aside>某一区域</aside>
<script>
    //如果这些元素的高度、位置会变化，不要用const.
    const areaTop = document.querySelector('aside').offsetTop;
    const areaBottom = areaTop + document.querySelector('aside').offsetHeight;
    const appbarHeight = document.querySelector('.mdui-appbar').offsetHeight;
    addEventListener('scroll', () =>
        scrollY + appbarHeight > areaTop &&
        scrollY + appbarHeight < areaBottom &&
        dispatchEvent(new Event('scrolled'))
    );
    addEventListener('scrolled', handler); //handler为事件处理函数。
</script>

回到某一区域后再触发事件：前边的代码会帮你做到。

演示地址： https://codepen.io/dffzmxj/pen/qBOPqvo