滚动条滚动到指定位置(锚点)的不同实现方式

一、在传统开发过程中，我们的锚点都是 通过a标签跳转至对应ID的形式 进行需求实现的。

<a href="#content1">Menu1</a>
<a href="#content2">Menu2</a>

<div id="content1">Content1</div>
<div id="content2">Content2</div>

 

二、还可以用 原生js去获取并修改scrollTop

这种情况，我们一般用于固定页面元素的锚点设置，或者设置返回顶部按钮。

❤️ 若vue + elementUI ，可用 Backtop组件回到顶部

 

   // 通过element.scrollTop来获取当前元素滚动条高度

    document.documentElement.scrollTop  ====> number  
    // 返回一个number类型的内容，是滚动条的高度
    
    
    // 也可以通过给scrollTop赋值去设置滚动条高度
    // 在控制台输出
    document.documentElement.scrollTop = 0
    // 会发现已经滚动的滚动条，滚动到页面最顶端。

浏览器的兼容性总是让人那么头疼

Safari中使用的是 window.pageYOffset IE中是 document.body.scrollTop 以及 document.documentElement.scrollTop；

所以考虑到浏览器兼容性问题，最后总结出一句完美兼容的代码。

 // 获取滚动条高度兼容性写法
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

 

三、 Element​.scroll​Into​View() 这个方法在MDN上的解释是实验中的功能，但是亲测主流浏览器是可用，并且出奇的好用。

 

// 将某个元素跳转到浏览器视口的最上方
    element.scrollIntoView() 

 

   
    element.scrollIntoView(); //默认等同于element.scrollIntoView(true) 
    
    // Boolean型参数
    // true  元素的顶端将和其所在滚动区的可视区域的顶端对齐 ；
    // false 元素的底端将和其所在滚动区的可视区域的底端对齐 

    element.scrollIntoView(alignToTop); 
    
    // 一个带有选项的object：
    // {
    //     behavior: "auto"(默认)  | "instant" | "smooth"(缓动),
    //     block:    "start" | "end",
    // }
    element.scrollIntoView(scrollIntoViewOptions); // Object型参数

 

四 、优化：加个缓动来提升下用户体验

scroll-behavior: smooth; // 滚动条缓慢滚动