Vue项目中实现描点跳转scrollIntoView-案例

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目中实现描点跳转scrollIntoView-案例相关的知识,希望对你有一定的参考价值。

 方式一:使用a标签#id形式

<a href="#about">联系我们</a>

<div id="about">
    跳转内容
</div>

方式二:scrollIntoView

//需要让页面滑动到指定位置
//首先给元素添加id属性或其他可以获取元素的属性
//通过scrollIntoView方法实现页面跳转
document.getElementById(id).scrollIntoView( behavior: "smooth" );

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

//可选
alignToTop:boolean值类型
true:默认值。元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: block: "start", inline: "nearest"。
false:元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: block: "end", inline: "nearest"。

//可选
scrollIntoViewOptions :
behavior :定义动画过渡效果,值为auto或smooth。
block :定义垂直方向的对齐,值为start/center/end/nearest。
inline :定义水平方向的对齐,值为start/center/end/nearest。

//实例
element.scrollIntoView(behavior: "smooth", block: "end", inline: "nearest");

使用

<a @click="goButtom">联系我们</a>

methods: 
	// 跳转到页面
	goButtom() 
	  document.getElementById("about").scrollIntoView(
		behavior: "smooth", // 平滑过渡
		block: "start", // 上边框与视窗顶部平齐。默认值
	  );
	,
,


------------------------------------------二------------------------------------------

<div id="pronbit" ref="pronbit">需要移动到的位置</div>

//选中id
document.getElementById(e).scrollIntoView(
	behavior: "smooth",  // 平滑过渡
	block:    "start"  // 上边框与视窗顶部平齐。默认值
);
// 选中ref
this.$refs.pronbit.scrollIntoView(
	behavior: "smooth",  // 平滑过渡
	block:    "start"  // 上边框与视窗顶部平齐。默认值
);

//要是放在mounted()里执行使用
this.$refs.pronbit.scrollIntoView();//不然只执行一次刷新了也一样

//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);

以上是关于Vue项目中实现描点跳转scrollIntoView-案例的主要内容,如果未能解决你的问题,请参考以下文章

vue中实现页面锚点的跳转

vue中实现页面锚点的跳转

Vue爬坑之旅:vue单页面中锚点跳转

页面锚点跳转的几种方式

Vue项目中实现用户登录及token验证

Vue项目中实现用户登录及token验证