添加scroll滚动动画

frontend/saas-portal-web/src/components/conenter/enterprise.vue

@@ -240,7 +240,8 @@ import { setTimeout } from 'timers';
         created() {
             if (!this.mytoken) {
                 this.$router.push({path:'/home'})
-            }
+            };
+            document.documentElement.scrollTop = 0;
         },
         mounted(){
             let phone = this.mytoken.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');

frontend/saas-portal-web/src/components/conenter/home.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="scroll">
+    <div id="scroll" @mousewheel="scrollout">
       <div class="top-nav">
         <div class="container">
           <ul>
@@ -22,7 +22,7 @@
 								<span id="user-info">{{account.realname || account.username}} | </span>
                 <span @click="loginout">[退出]</span>
 							</span>
-              <router-link to="/enterprise"><a><span @click="home" style="color: white">账户中心</span></a></router-link>
+              <router-link to="/enterprise"><a><span style="color: white">账户中心</span></a></router-link>
             </li>
           </ul>
         </div>
@@ -44,7 +44,8 @@
             </div>
         <div class="collapse navbar-collapse navbar-right" role="navigation" style="position: absolute;left: 35%;">
           <ul @click="gohome" id="nav" class="nav navbar-nav menu">
-            <li><a href="#" @click="setTurnHome"><span>首页</span></a></li>
+            <!-- <li><a href="#" @click="setTurnHome"><span>首页</span></a></li> -->
+            <li class="xs"><a @click="home"><span>首页</span></a></li>
             <li class="xs"><a @click="feature2"><span>特色</span></a></li>
             <li class="xs"><a @click="service2"><span>功能</span></a></li>
             <li class="xs"><a @click="download"><span>下载</span></a></li>
@@ -299,6 +300,7 @@
         isexperience: false,
         isproblem: true,//常见问题
         isfeature:this.$route.params.isfeature,
+        timer:null,
       }
     },
     components: {
@@ -350,6 +352,9 @@
         }
       })
     },
+    beforeDestroy(){
+      clearInterval(this.timer)
+    },
     mounted() {
       this.clientId = Math.random().toString(36).substr(2)
       // 从本地加载已经登录的信息
@@ -450,9 +455,6 @@
       },
     },
     methods: {
-      home() {
-        document.documentElement.scrollTop = 0;
-      },
       listenOnCallback() {
         const me = this
         subscribe(this.clientId, '/sso/callback').then(data => {
@@ -512,13 +514,10 @@
         let url = 'https://saas-assets.usoftchina.com/UsoftchinaSaasClient_setup.exe';
         let alink = document.createElement("a");
         alink.style.display = 'none';
-        // let blob = new Blob([url]);
-        // alink.href = URL.createObjectURL(blob);
         alink.href = url;//下载地址
         // alink.download = "pic"; //文件名(自定义)
         document.body.appendChild(alink);
         alink.click();
-        // URL.revokeObjectURL(alink.href);
       },
       //体验
       experience(){
@@ -579,26 +578,53 @@
       //常见问题
       navproblem(){
         this.$store.commit('problemfalse');
-        document.documentElement.scrollTop = 0;
+        // document.documentElement.scrollTop = 0;
+        clearInterval(this.timer);
+        this.animate(0);
+      },
+      home() {
+        clearInterval(this.timer);
+        this.animate(0);
+        this.setTurnHome();
       },
       //特色
       feature2(){
-        document.documentElement.scrollTop = 690;
+        clearInterval(this.timer);
+        this.animate(690);
         this.setTurnHome();
       },
       //功能
       service2(){
-        document.documentElement.scrollTop = 3530;
+        clearInterval(this.timer);
+        this.animate(3530);
         this.setTurnHome();
       },
       // 下载
       download(){
-        document.documentElement.scrollTop = 4190;
-        // $('html,body').animate({
-        //       scrollTop: 4400
-        // },2000);
+        // document.documentElement.scrollTop = 4190;
+        // window.scrollTo(0,4190);
+        clearInterval(this.timer);
+        this.animate(4190);
         this.setTurnHome();
       },
+      //添加鼠标滚轮事件，鼠标滚动的时候清除定时器，否则无法滚动
+      scrollout(){
+        clearInterval(this.timer);
+      },
+      //滚动动画封装
+      animate(target) {
+        clearInterval(this.timer);
+        this.timer = setInterval(function () {
+            var leader = document.documentElement.scrollTop;
+            var step = (target - leader) / 10;
+            step = step > 0 ? Math.ceil(step) : Math.floor(step);
+            leader = leader + step;
+            document.documentElement.scrollTop = leader;
+            if (leader === target) {
+                clearInterval(this.timer);
+            }
+        }, 5);
+      },
       gohome(e){
         this.$store.commit('problemtrue')
         // this.isproblem = true