jquery.toTop返回顶部效果,鼠标下滑出现返回顶部按钮
  • 分享到微信朋友圈
    X
立即下载 查看演示

jQuery toTop是一个简单、可定制且轻量级的插件，可平滑滚动回顶部。

优势

  • 非常简单且超级友好的插件

  • 非常轻量级，缩小版大小小于 1KB

  • 高度可定制的选项

  • 您可以使用任何 html 元素和样式

  • 100% 无错误

使用方法

引入jQuery文件

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

HTML

<a class="to-top" title="返回顶部"></a>

初始化

<script>
    //jquery.toTop插件初始化
    $(function () {
        $('.to-top').toTop();
    });
</script>

更多的参数设置

可选参数说明

  • autohide 布尔值 true 自动隐藏

  • offset 整数 420 距离顶部多少距离时自动隐藏按钮

  • speed 整数 500 滚动持续时间

  • position 布尔值 true 如果设置为 false，则需要手动在 css 中设置“按钮”的位置

  • right 整数 15 右侧距离

  • bottom 整数 30 底部距离