router切换， 滚动条不自动置顶

微信公众号从一个有滚动条的页面条状到连一个有滚动条的页面，此时滚动条会记录上一次滚动条的位置，不会自动置顶

 图一                                                                                     图二

 

 如图所示从图一进入到图二，滚动条自动滚动到底部。

解决方法

方法一：

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> ) }

这样就可以达到想要的效果了