diff --git a/site/src/components/DemoBox.vue b/site/src/components/DemoBox.vue
index 8a602844b..ebb8ea149 100644
--- a/site/src/components/DemoBox.vue
+++ b/site/src/components/DemoBox.vue
@@ -82,6 +82,22 @@
         <slot v-if="type === 'TS'" name="htmlCode" />
         <slot v-else name="jsVersionHtml" />
       </div>
+      <div class="code-box-actions code-box-actions-bottom">
+        <a-tooltip :title="$t(`app.demo.code.hide`)">
+          <span class="code-expand-icon code-box-code-action">
+            <img
+              alt="expand code"
+              :src="
+                theme === 'dark'
+                  ? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
+                  : 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg'
+              "
+              :class="'code-expand-icon-show'"
+              @click="handleCodeExpand($event, sectionId)"
+            />
+          </span>
+        </a-tooltip>
+      </div>
     </section>
   </section>
 </template>
@@ -164,11 +180,17 @@ export default defineComponent({
           ).trim()
         : '',
     );
-    const handleCodeExpand = () => {
+    const handleCodeExpand = (_, sectionId?) => {
       if (globalConfig.blocked.value) {
         warning();
         return;
       }
+      if (sectionId) {
+        const element = document.getElementById(sectionId);
+        if (element) {
+          element.scrollIntoView();
+        }
+      }
       codeExpand.value = !codeExpand.value;
     };
     const handleCodeCopied = () => {
diff --git a/site/src/theme/static/common.less b/site/src/theme/static/common.less
index a40355a17..68f2c9867 100644
--- a/site/src/theme/static/common.less
+++ b/site/src/theme/static/common.less
@@ -2,6 +2,7 @@ html {
   &.rtl {
     direction: rtl;
   }
+  scroll-behavior: smooth;
 }
 
 body {