PC端网页vue项目,页面滚动点击悬浮按钮最快的方法

业务场景,可视化大屏右下角添加一个悬浮按钮,点击按钮页面滚动到顶部。

经过实验,使用锚点是最简单的办法。

方法一:锚点

给顶部的合适位置添加一个 name="top"的锚点,maodianTop用于控制样式,可以不设置。

点击部分的超链接。

置顶 

嵌套一下

 

给按钮添加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

你可能感兴趣的:(置顶,vue,PC)