模板中心滚动回到顶部效果

src/pages/exchangepage/template/main.js

@@ -36,6 +36,7 @@ export default class mytemplate extends React.Component{
 		preview_visible:false,
 		topbar:"",
 		 top:"",
+		 toTopshow:false,
 		 center:"",
 		  bottom:""
     }
@@ -220,7 +221,12 @@ export default class mytemplate extends React.Component{
 	onClose(){
 		this.setState({preview_visible:false})
 	}
-
+	mouseupFn(){
+		this.setState({toTopshow:true});
+	}
+	mouseoverFn(){
+		this.setState({toTopshow:false});
+	}
  
   render(){
     return(
@@ -334,19 +340,11 @@ export default class mytemplate extends React.Component{
 			  			 )
 			  			})
 			  }
-			  
+	         </div>
-			  
+					 <div ref="toTop" className="toTop-canvas" onMouseEnter={this.mouseupFn.bind(this)} onMouseLeave={this.mouseoverFn.bind(this)}>
-		
+					 <img className="toTopBtn" onClick={this.toTop.bind(this)} src={this.state.toTopshow?'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/totopbtn.svg':'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/willtotop.svg'} alt=""/>
-			
-		
-	         
-	
-			 
-			 
-			 
 					 
 					 </div>
-					 <img className="toTopBtn" onClick={this.toTop.bind(this)} src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/totopBtn.png" alt=""/>
 					 <div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>到底部了哟,没有了哦</div>
 	        </div>
 	       </div>

src/pages/exchangepage/template/main.less

@@ -2548,13 +2548,24 @@ div.previewclose {
 	background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
 	z-index: 1;
 }
-.toTopBtn{
+.toTop-canvas{
+	width: 60px;
+	height: 60px;
+	border-radius: 60px;
+	background: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 1px 2px 3px 3px #eee;
 	position: fixed;
-	bottom: 0;
-	width: 90px;
 	right: 2vh;
+	bottom:2vh;
 	cursor: pointer;
 }
-.toTopBtn:hover{
+.toTopBtn{
-	transform: scale(1.2);
+	width: 40px;
+	fill-opacity: 0.2;
+}
+.toTop-canvas:hover{
+	transform: scale(1.1);
 }