滚动页面到指定元素的位置

scrollIntoView() 方法可用于以下几种情况:

1. 表单报错后,需要滚动页面至报错位置。

2、模拟锚链接快速定位。

3、返回顶部。

4、使页面滚动到指定位置。

......

用法:

  1. 不传递任何参数:scrollIntoView(),缺省的参数默认值是true,它表示将会滚动页面至元素的端和所在滚动区域的可视区域的端对齐。
  2. 传递参数 false:scrollIntoView(false),它表示将会滚动页面至元素的端和所在滚动区域的可视区域的端对齐。
  3. 使用配置项进行配置,其可选的配置项有:
    • behavior【可选】:滚动使用的动画,有三个可选项:
      • smooth:平滑的动画;
      • instant:无动画;
      • auto:默认的动画,即跟随浏览的滚动动画,其由 scroll-behavior 的计算值决定。
    • block【可选】:定义垂直方向的对其方式。有四个可选项:
      • start【默认值】:顶部对齐。
      • center:居中对齐。
      • end:底部对齐。
      • nearest:最近的位置。
    • inline【可选,横向滚动的时候使用】:定义水平方向的对其。有四个可选项。
      • start【默认值】:左部对齐。
      • center:居中对齐。
      • end:右部对齐。
      • nearest:最近的位置。

示例

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

syksdl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值