scrolltotop.js 可以自动显示或者隐藏的平滑返回顶部功能jQuery插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

‌jquery.scrolltotop.js‌是一个基于jQuery的滚动到顶部插件，它允许用户在页面滚动到一定位置时显示一个“返回顶部”的按钮，点击该按钮可以将页面滚动到顶部。该插件提供了多种配置选项，如开始显示按钮的滚动位置、滚动动画的持续时间等，使得用户可以根据具体需求进行定制‌。

如何使用scrolltotop.js

步骤1：引入插件文件

在结束/body 标签之前,在页面的底部加上Javascript

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/scrolltotop.js" type="text/javascript"></script>

主要js代码与说明

<script>
    scrolltotop.controlattrs = { offsetx: 20, offsety: 150 }; //水平偏移量 垂直偏移量
    scrolltotop.controlHTML = '<div class="gotop"><img src="images/totop-icon.png"/></div>'; //按钮的HTML内容
    scrolltotop.anchorkeyword = '#gotop'; //锚点关键词
    scrolltotop.title = "返回顶部"; //回到顶部title属性
    scrolltotop.init(); //初始化
</script>

参数说明

  • startline‌ //动到顶部按钮开始出现的位置

  • scrollto‌ //滚动到顶部按钮点击后滚动的目标位置

  • scrollduration‌ //滚动动画的持续时间

  • fadeduration‌ //按钮淡入淡出效果的持续时间

  • controlHTML //html代码

  • offsetx‌ //按钮相对于窗口右下角的水平偏移量

  • offsety‌ //按钮相对于窗口右下角的垂直偏移量

  • anchorkeyword //锚点关键词

  • title //回到顶部title属性