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

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

扫描二维码关注公众号，回复： 4759500 查看本文章