diff --git a/src/views/common/SongDetail.vue b/src/views/common/SongDetail.vue
index 86dc5d3..8524159 100644
--- a/src/views/common/SongDetail.vue
+++ b/src/views/common/SongDetail.vue
@@ -66,12 +66,16 @@ const handleLyric = (ly) => {
 };
 
 watch(
-  ()=> currentLyricIdx.value,
-  (val)=>{
+  ()=> [currentLyricIdx.value,store.state.showSongDetail],
+  ([val, showSongDetail])=>{
+    console.log('changed lyric');
     if(val>0){
       // let elContent = document.getElementsByClassName('ly-content')[0]
-      let el = document.getElementsByClassName('ly-key-lines')[val]
-      lyList.value.scrollTop = el.offsetTop - 100
+      nextTick(()=>{
+        let el = document.getElementsByClassName('ly-key-lines')[val]
+        lyList.value.scrollTop = el.offsetTop - 100
+      })
+      
     }
   },
   {
@@ -299,6 +303,7 @@ export default {};
         margin-top: 15px;
         height: 290px;
         overflow-y: auto;
+        scroll-behavior: smooth;
 
         //  background-image : linear-gradient(180deg,hsla(255,0%,100%,0),rgba(255, 255, 255, 0.521));