页面锚点跳转的几种方式

时间：2021-05-16 10:12:15 阅读：11 评论：0 收藏：0 [点我收藏+]

写在开头：这个是我这周工作时候遇到的，当时百度的方法，第二天我们大佬说，你这写出来没有动画呀，于是，我又去面向百度，找到的最终版本，本人亲测，因为我们这个项目是vue的移动端App版本，所以暂时没有发现兼容性问题。废话不多，直接上代码。

第一种：是用a标签，纯html跳转，url地址会变化

第二种：纯js实现

<p onclick="javascript:document.getElementsByClassName(‘d2‘)[0].scrollIntoView({behavior:‘smooth‘})"></p>，

其中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" 之一。默认为 "auto"。
block 可选: 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline 可选: 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

示例

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

页面锚点跳转的几种方式

原文：https://www.cnblogs.com/HJWL/p/14773079.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)