html5锚点滚动

普通的锚点滚动方式是直来直去的,不太平滑,我们可以借助scrollIntoView实现平滑滚动。

原始方案

1
2
3
4
5
<div class="fixedbox">
    <a class="actiongithub" href="https://github.com/caibingcheng/rssblog" title="GitHub" target="_blank" rel="noopener noreffer me"></a>
    <a class="actiontop" href="#top-header"></a>
    <a class="actionbottom" href="#bottom-footer"></a>
</div>

一般会按照上述方案实现锚点滚动, 但是这种方案的问题有两点:

  1. 会改变url
  2. 滚动动画不平滑

scrollIntoView

采用scrollIntoView可以使用很少的代码实现平滑滚动, 并且不会改变url.

1
2
3
4
5
<div class="fixedbox">
    <a class="actiongithub" href="https://github.com/caibingcheng/rssblog" title="GitHub" target="_blank" rel="noopener noreffer me"></a>
    <a class="actiontop" onclick="javascript:document.getElementById('top-header').scrollIntoView({block: 'start', behavior: 'smooth', inline: 'center'})"></a>
    <a class="actionbottom" onclick="javascript:document.getElementById('bottom-footer').scrollIntoView({block: 'start', behavior: 'smooth', inline: 'center'})"></a>
</div>

scrollIntoView可以接收三个参数:

  • behavior: 定义动画过渡效果, “auto"或 “smooth” 之一. 默认为 “auto”.
  • block: 定义垂直方向的对齐, “start”, “center”, “end”, 或 “nearest"之一. 默认为 “start”.
  • inline: 定义水平方向的对齐, “start”, “center”, “end”, 或 “nearest"之一. 默认为 “nearest”.

注意: Safari桌面和移动端都不支持scrollIntoView参数, 仅可以使用默认配置, 这时候是没有平滑滚动效果的.