jQuery.toTop - 一款轻量级可自由定制的平滑滚动的jQuery返回顶部插件
  • 分享到微信朋友圈
    X
立即下载

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

优势

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

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

  • 高度可定制的选项

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

  • 100% 无错误

使用方法

引入jQuery文件

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

HTML

<!-- Scroll to Top 按钮元素 -->
<a class="to-top">Top &uarr;</a>

初始化

<script>
    jQuery(function ($) {
        // Plugin activation with options
        $('.to-top').toTop({
            //options with default values
            autohide: true,  //boolean 'true' or 'false'
            offset: 420,     //numeric value (as pixels) for scrolling length from top to hide automatically
            speed: 500,      //numeric value (as mili-seconds) for duration
            position: true,   //boolean 'true' or 'false'. Set this 'false' if you want to add custom position with your own css
            right: 15,       //numeric value (as pixels) for position from right. It will work only if the 'position' is set 'true'
            bottom: 30       //numeric value (as pixels) for position from bottom. It will work only if the 'position' is set 'true'
        });
    });
</script>

更多的参数设置

可选参数说明

  • autohide 布尔值 true 自动隐藏

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

  • speed 整数 500 滚动持续时间

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

  • right 整数 15 右侧距离

  • bottom 整数 30 底部距离