H5 Api scrollIntoView()方法

Element.scrollIntoView()

	在vue项目过程中,我写过一个滚动导航,用的是a标签锚点跳转,
	点击的时候,url地址会发生改变,那么路由返回上一级就会报错,
	这个时候我查到了h5中的scrollIntoView()

语法

element.scrollIntoView(alignToTop,scrollIntoViewOptions)

说明

alignToTop:可选Boolean参数,如果不填写,默认是true

如果为true :  元素的顶端将和其所在滚动区的可视区域的顶端对齐
如果为false:  元素的底端将和其所在滚动区的可视区域的底端对齐

scrollIntoViewOptions:可选Object参数,

behavior : 定义动画过渡效果，  "auto"或 "smooth" 之一。默认为 "auto"
block  	 : 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline   : 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"

<div id='box'></div>
<script>
 let Element = document.getElementById('box')
 Element.scrollIntoView({ //没有写Boolean参数 ,默认是true;
 		behavior: "smooth",
        block: "start", 
        inline: "start"	
})
//滚动到这个DOM节点位置
</script>

浅谈:解决跳转更改路径问题,不局限于a标签锚点跳转,可以是一个div 或者任意标签,只要获取到对应的DOM节点,皆可以跳转,增加了过渡动画