概述

  • 增强类似于锚点跳转到某位置，动画渐渐跳转效果。
  • 为触发元素绑定data-toggle="smoothScroll"
  • a标签连接直接设置连接的hash，其他元素则添加data-target="#id"
实例
去顶部 去底部 
            
<a href="#top" class="btn small-btn default" data-toggle="smooth-scroll">去顶部</a>
<a href="#bottom" class="btn small-btn default" data-toggle="smooth-scroll">去底部</a>

偏移

  • 设置偏移offset让滚动条滚动到离目标位置一定距离。
实例
去offset上方20px位置 
            
<a href="#top" class="btn small-btn default" data-offset="-20" data-toggle="smooth-scroll">去顶部</a>

事件监听

  • 为元素添加 done.bp.smoothscroll 或者JS调用配置 complete 来监听滚动完成事件。
实例
属性 默认值 描述
duration 500 动画时间
transition easeOutExpo 动画类型名称
offset 0 目标偏移位置多少像素
complete function() {} 完成回调 
            
$('#j-offset').on('done.bp.smoothscroll', function(){ alert('到达offset偏移'); })

接口方法

实例
            
$(function() {
  $('#demo').on('click', function() {
    var offset = Math.floor(Math.random() * 100 * 2)
    $('#offset-btn').smoothScroll('scrollTo', {
      offset: -offset,
      complete: function() {
        alert('done')
      }
    })
  })
})