vue中点击按钮添加样式

Posted 2023-04-24 smil、梵音

https://blog.csdn.net/hum1108/article/details/111480132

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

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

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

方法一：锚点

给顶部的合适位置添加一个 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