jQuery轻量级平滑滚动返回顶部插件

当前位置:主页 > jQuery库 > 布局和界面 > jQuery轻量级平滑滚动返回顶部插件
jQuery轻量级平滑滚动返回顶部插件
分享:

    插件介绍

    jQuery.toTop是一款轻量级可自由定制的平滑滚动的jQuery返回顶部插件。该返回顶部插件大小只有1kb,返回顶部按钮的样式可以通过CSS来完全自定义。返回顶部时的动画效果平滑顺畅,而且使用非常简单。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-31
    阅读:
简要教程

jQuery.toTop是一款轻量级可自由定制的平滑滚动的jQuery返回顶部插件。该返回顶部插件大小只有1kb,返回顶部按钮的样式可以通过CSS来完全自定义。返回顶部时的动画效果平滑顺畅,而且使用非常简单。它的特点有:

  • 使用超级简单
  • 轻量级,压缩版小于1kb
  • 可通过选项自定义插件
  • 可以使用任何HTML元素来制作返回顶部元素,可通过CSS来自定义它的样式
  • 100%没有BUG

使用方法

在页面中引入jQuery和jquery.toTop.min.js文件。

<script src="jquery.min.js"></script>
<script src="js/jquery.toTop.min.js"></script>              
              
HTML结构

可以使用任何HTML元素来制作返回顶部的容器。

<a class="to-top">Top ↑</a>                
              
初始化插件

在页面加载完毕之后通过下面的方法来初始化该返回顶部插件。

 $('.to-top').toTop();
              

配置参数

$('.to-top').toTop({
    //options with default values
    autohide: true,
    offset: 420,
    speed: 500,
    right: 15,
    bottom: 30
});                
              
名称 参数值 描述
autohide boolean 返回顶部按钮是否自动隐藏。可以设置truefalse。默认为true
offset Integer (px) 页面滚动到距离顶部多少距离时隐藏返回顶部按钮。默认值为420
speed Integer (ms) 滚动和渐隐的持续时间,默认值为500
right Integer (px) 返回顶部按钮距离屏幕右边的距离,默认值为15
bottom Integer (px) 返回顶部按钮距离屏幕顶部的距离,默认值为30