Selaa lähdekoodia

测试跨页面锚点跳转

ming 1 vuosi sitten
vanhempi
commit
76423cb442
3 muutettua tiedostoa jossa 29 lisäystä ja 22 poistoa
  1. 24 0
      assets/js/commonVue.js
  2. 2 21
      assets/js/component/feedFix.js
  3. 3 1
      template5/index.html

+ 24 - 0
assets/js/commonVue.js

@@ -101,8 +101,32 @@ const App = {
   },
   mounted: function () {
     this.getColumnData()
+
+    if (window.location.hash) {
+
+        // 方法一
+        setTimeout(()=>{
+          var aa=window.location.hash.replace("#", "")
+          document.getElementById(aa).scrollIntoView({
+            behavior: 'smooth' // 可选,平滑滚动效果
+          });
+        },100)
+
+        //方法二
+        setTimeout(()=>{
+          this.goAnchor(window.location.hash)
+        },100)
+    }
   },
   methods: {
+    goAnchor (selector) {
+      let anchor=this.$refs.myElement
+      console.log(anchor.offsetTop)
+      console.log(document.documentElement.scrollTop)
+      document.documentElement.scrollTop = anchor.offsetTop; // chrome
+      console.log(document.documentElement.scrollTop)
+    },
+
 
     goMobileIconClick(){
       this.mobileListBoolean=!this.mobileListBoolean

+ 2 - 21
assets/js/component/feedFix.js

@@ -5,27 +5,8 @@ export default {
   template: `
   <div class="feedBackBox">
               <div class="contactOne">
-                  <img src="/assets/img/home/f_phone.png" alt="">
-                  <ul class="contactInner">
-                      <li style="font-size:25px;margin-bottom:5px">合作共赢</li>
-                      <li>
-                          <span>智&nbsp;  慧&nbsp;  消&nbsp;&nbsp;  防:</span>
-                          <span>李先生 18621761642</span>
-                      </li>
-                      <li>
-                          <span>人脸识别系统:</span>
-                          <span>李先生 18621761642</span>
-                      </li>
-                      <li>
-                          <span>弱 电 智 能 化:</span>
-                          <span>李先生 13918571231</span>
-                      </li>
-                      <li>
-                          <span>质量 监督投诉:</span>
-                          <span>孙先生 17721169552</span>
-                      </li>
-                      <li style="margin-top:10px">其他智慧城市相关应用合作: 021-65376655</li>
-                  </ul>
+                  <a href="/template5#465"><img src="/assets/img/home/f_phone.png" alt=""></a>
+                  
               </div>
               <div class="contactQr">
                   <!-- 二维码 -->

+ 3 - 1
template5/index.html

@@ -79,7 +79,7 @@
             <!--====== COMMON BREADCRUMB END ======-->
     
             <div>
-                <section class="about-introduce-section course-section pt-40 pb-60 about-sec"
+                <section :id="arr.id" class="about-introduce-section course-section pt-40 pb-60 about-sec"
                     v-for="(arr,index) in articalArray" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
                     <div :id="arr.id" class="pointOffset">0</div>
                     <div class="container">
@@ -114,6 +114,8 @@
                         </div>
                     </div>
                 </section>
+
+                <div ref="myElement" id="333">dsdsd</div>
             </div>
     
             <!--====== FOOTER PART START ======-->