业务场景,可视化大屏右下角添加一个悬浮按钮,点击按钮页面滚动到顶部。
经过实验,使用锚点是最简单的办法。
方法一:锚点
给顶部的合适位置添加一个 name="top"的锚点,maodianTop用于控制样式,可以不设置。
<a class="maodianTop" name="top"></a>
点击部分的超链接。
<a href="#top">置顶</a>
嵌套一下
<div class="zhiDing"><a href="#top">置顶</a></div>
给按钮添加css样式,根据自己的审美设置。
.zhiDing{color: #fff;position: fixed;right: 0.6rem;bottom:0.88rem;width: 0.6rem;height: 0.6rem;border-radius: 50%;z-index: 999;overflow: hidden;-webkit-transition-duration: 300ms;transition-duration: 300ms;box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .2