From 0e423cfb4646805dd0f721374c7d18fb4b66ea7c Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Tue, 5 Nov 2024 11:31:33 +0800
Subject: [PATCH] docs(site): optimize demos scroll behavior

---
 .../sites/src/views/components/components.vue    |  2 +-
 .../src/views/components/float-settings.vue      | 16 +++-------------
 examples/sites/src/views/layout/layout.vue       | 11 -----------
 3 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 1baa584124..ffe6be37ee 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -493,7 +493,7 @@ export default defineComponent({
             })
           }
         }
-      }, 600)
+      }, 0)
     }
 
     // 在singleDemo情况时，才需要滚动示例区域到顶
diff --git a/examples/sites/src/views/components/float-settings.vue b/examples/sites/src/views/components/float-settings.vue
index cc88309477..c73b4af60b 100644
--- a/examples/sites/src/views/components/float-settings.vue
+++ b/examples/sites/src/views/components/float-settings.vue
@@ -200,17 +200,11 @@ export default defineComponent({
         const nav = document.querySelector('.nav')
         if (docLayout) {
           docLayout.onscroll = debounce(100, false, () => {
-            const {
-              scrollTop: layoutScrollTop,
-              scrollHeight: layoutScrollHeight,
-              clientHeight: layoutHeight
-            } = docLayout
+            const { scrollTop: layoutScrollTop } = docLayout
             const headerHeight = docLayout.querySelector('header')?.clientHeight || 0
-            const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0
             const footerTop = footer.getBoundingClientRect().top
             const navHeight = nav?.clientHeight || 0
             const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom'))
-            const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight)
 
             state.showBackTop = layoutScrollTop > 500
             state.showSettings = footerTop - navHeight - headerHeight > 220
@@ -218,11 +212,6 @@ export default defineComponent({
             if (!state.initBottomVal) {
               state.initBottomVal = currSettingsBottom
             }
-            if (footerVisibleHeight > state.initBottomVal - 40) {
-              state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
-            } else {
-              state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
-            }
           })
         }
       })
@@ -297,9 +286,10 @@ export default defineComponent({
     border-radius: 12px;
     background-color: #fff;
     cursor: pointer;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 
     &:hover {
-      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
 
       .settings-icon {
         color: #191919;
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 4b0f120a90..40c8c54d8f 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -153,17 +153,6 @@ export default defineComponent({
     )
 
     onMounted(async () => {
-      // 每次切换路由，有锚点则跳转到锚点，否则导航到顶部
-      routerCbDestroy = router.afterEach((to) => {
-        if (to.hash) {
-          const el = document.querySelector(to.hash)
-          if (el) {
-            return el.scrollIntoView()
-          }
-        }
-        state.contentRef.scrollTo({ top: 0, behavior: 'auto' })
-      })
-
       // 刷新后，高亮相应的菜单
       const cmpId = router.currentRoute.value?.params?.cmpId
       if (cmpId) {