页面锚点跳转的几种方式

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

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

<a href="#d1"></a> <div id="d1"></div>   第二种:纯js实现 <div class="d2"></div> <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"});


上一篇:scrollIntoView()实现简单的锚点定位


下一篇:页面平滑滚动小技巧