html5锚点滚动

2021-06-01 约 394 字预计阅读 1 分钟

摘要: 作者介绍了通过scrollIntoView实现HTML5锚点平滑滚动的方法，避免了传统锚点滚动的突兀和改变URL的问题。该方法只需少量代码，且可自定义动画效果，但在Safari浏览器中不支持参数，无法实现平滑滚动。 (评价: A)

普通的锚点滚动方式是直来直去的，不太平滑，我们可以借助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>

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

会改变url
滚动动画不平滑

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参数, 仅可以使用默认配置, 这时候是没有平滑滚动效果的.