router切換, 滾動條不自動置頂
阿新 • • 發佈:2019-01-03
微信公眾號從一個有滾動條的頁面條狀到連一個有滾動條的頁面,此時滾動條會記錄上一次滾動條的位置,不會自動置頂
圖一 圖二
如圖所示從圖一進入到圖二,滾動條自動滾動到底部。
解決方法
方法一:
js原生有一個scrollIntoView方法,注意一定是原生 ,不能用jquery。用jquery會報錯的 ,因為jquery沒有這個方法。
document.getElementById("guide").scrollIntoView(); 通過ID那到這Dom元素直接掉這個方法就可以了。
export default class ‘元件名稱’extends Component { componentDidMount(){ document.getElementById("guide").scrollIntoView(); } return ( <div id="guide"> <img style={{display: 'block', width: '100%'}} src="..." alt="引導圖" /> </div> ) }
方法二:
在React中可以用ref這個鉤子。
export default class ‘元件名稱’extends Component { componentDidMount(){ const { hook } = this.refs; hook.scrollIntoView(); } return ( <div ref = 'hook '> <img style={{display: 'block', width: '100%'}} src="..." alt="引導圖" /> </div> ) }
這樣就可以達到想要的效果了