【JavaScript】HTML页面中取代锚点自动滑动页面的一种方式 scrollIntoView()

HTML页面中取代锚点自动滑动页面的一种方式scrollIntoView()

文章目录

• HTML页面中取代锚点自动滑动页面的一种方式scrollIntoView()
• • 定义
  • • Boolean
    • Object
    • • behavior
      • block
      • inline
  • 代码示例

在用户界面中，经常使用锚点帮助用户跳转到页面的某个特定位置。锚点基于超链接的方式，在用户点击事件之后滑动页面。如果你觉得添加锚点和链接元素比较麻烦和不美观，可以尝试组件的

scrollIntoView()

方法。

定义

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter
           

这个方法可选参数为

Boolean

或者更为详细的

Object

Boolean

如果参数为

true

，选中的元素会与可视区域最上端平齐（在滚动条可动范围内）

如果参数为

false

，选中的元素会与可视区域最下端齐平（在滚动条可动范围内）

Object

对象参数中含有三个属性：

behavior

,

block

,

inline

behavior

auto

或者

smooth

,默认为

auto

block

start

,

end

,

nearest

,

center

，block属性定义垂直方向的对齐设置，大家根据自己的需求来。默认为

start

inline

start

,

end

,

nearest

,

center

，inline属性定义水平方向的对齐设置。由于水平方向的滚动条一般不会使用，因此保持在

start

就好。默认为

nearest

代码示例

如果你要使用对象参数的话，也可以不规定所有属性，这样未设定的属性会保持在默认值。

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

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