diff --git a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts
index 4cfeff7496aee330566686bd77e728f55793970a..6120300ee6ee1e5ec239de11419aa95a81c50f17 100644
--- a/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts
+++ b/packages/devui-vue/devui/steps-guide/hooks/use-steps-guide-position.ts
@@ -1,4 +1,4 @@
-import { Ref, ref, reactive, computed } from 'vue'
+import { Ref, ref, reactive, computed, nextTick } from 'vue'
 import { Step, positionConf } from '../src/steps-guide-types'
 
 export function useStepsGuideNav(steps: Step[], stepIndex:Ref<number>) {
@@ -8,7 +8,7 @@ export function useStepsGuideNav(steps: Step[], stepIndex:Ref<number>) {
     _step.position = _step.position || 'top'
     return _step
   })
-  const guideClassList = ['d-steps-guide']
+  const guideClassList = ['devui-steps-guide']
   const stepsRef = ref(null)
   const guidePosition = reactive({
     left: '',
@@ -19,6 +19,7 @@ export function useStepsGuideNav(steps: Step[], stepIndex:Ref<number>) {
     const baseTop = window.pageYOffset - document.documentElement.clientTop
     const baseLeft = window.pageXOffset - document.documentElement.clientLeft
     const currentStepPosition:positionConf = currentStep.value.position
+    const stepGuideElement = stepsRef.value
     let _left, _top
     // 自定义 position位置
     if (typeof currentStepPosition !== 'string') {
@@ -28,7 +29,6 @@ export function useStepsGuideNav(steps: Step[], stepIndex:Ref<number>) {
       _top = top
     } else {
       guideClassList.splice(1, 1, currentStepPosition)
-      const stepGuideElement = stepsRef.value
       const triggerSelector = currentStep.value.target || currentStep.value.trigger
       const triggerElement = document.querySelector(triggerSelector)
       const targetRect = triggerElement.getBoundingClientRect()
@@ -63,6 +63,10 @@ export function useStepsGuideNav(steps: Step[], stepIndex:Ref<number>) {
     }
     guidePosition.left = _left + 'px'
     guidePosition.top = _top + 'px'
+    nextTick(() => {
+      // 位置更新后滚动视图
+      stepGuideElement.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"})
+    })
   }
   return {
     currentStep,
diff --git a/packages/devui-vue/devui/steps-guide/src/steps-guide.scss b/packages/devui-vue/devui/steps-guide/src/steps-guide.scss
index a9f035a8588e43cccd53fdb9a4fb6dd77ac3d940..a3d28a7684dfa7ab1bfc4d0de3ec2f136020725e 100644
--- a/packages/devui-vue/devui/steps-guide/src/steps-guide.scss
+++ b/packages/devui-vue/devui/steps-guide/src/steps-guide.scss
@@ -6,7 +6,7 @@ $devui-shadow-length-feedback-overlay: var(--devui-shadow-length-feedback-overla
 $devui-border-radius-feedback: var(--devui-border-radius-feedback, 4px);
 $devui-font-size-page-title: 12px;
 
-.d-steps-guide {
+.devui-steps-guide {
   width: 400px;
   min-height: 160px;
   background: $devui-brand;