浮动电梯或回到顶部小插件:iElevator.js

Posted Zsingsong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动电梯或回到顶部小插件:iElevator.js相关的知识,希望对你有一定的参考价值。

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活。

技术分享

Default Options

_defaults = {
    floors: null,
    btns: null,
    backtop: null,
    selected: ‘‘,
    sticky: -1,
    visible: {
        isHide: ‘no‘,
        numShow: 0
    },
    speed: 400,
    show: function(me) {
        me.element.show();
    },
    hide: function(me) {
        me.element.hide();
    }
}
  • floors:  页面中floor模块的引用
  • btns:  焦点图的引用
  • backtop:  回到顶部按钮的引用
  • selected:  焦点图在进行滚动或单击时的选中样式
  • sticky:  模拟position: sticky定位,并可以指定elevator顶部距离窗口顶部的距离,默认为-1
  • visible:  用于控制【电梯】的显示与隐藏,当srollTop值大于numShow时,显示【电梯】,反之则隐藏
  • speed:  控制滑条的滚动速度
  • show:  可以重写该函数,来定制elevator的显示方式
  • hide:  可以重写该函数,来定制elevator的隐藏方式

安装

npm install ielevator || bower install ielevator

使用

 1. back to top 【回到顶部】[单击我看Demo效果]
HTML:

<div class="elevator elevator-backtop" id="backtop" >
 <a href="javascript:;" class="js-backtop">TOP</a>
</div>

Javascript:

$(‘#backtop‘).ielevator({
  backtop: $(‘#backtop .js-backtop‘)
});

只需获取`backtop`引用即可,就这么简单!

2. simulate elelvator  [单击我看Demo效果]
html:

<div class="elevator" id="elevator" data-elevator-options=‘{"selected": "custome-selected"}‘>
  <ul>
    <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
    <li><a href="javascript:;" class="js-btn">floor2</a></li>
    <li><a href="javascript:;" class="js-btn">floor3</a></li>
    <li><a href="javascript:;" class="js-btn">floor4</a></li>
    <li><a href="javascript:;" class="js-btn">floor5</a></li>
    <li><a href="javascript:;" class="js-btn">floor6</a></li>
    <li><a href="javascript:;" class="js-btn">floor7</a></li>
  </ul>
</div>

Javascript:

    $(‘#elevator‘).ielevator({
        floors: $(‘.js-floor‘),
        btns: $(‘#elevator .js-btn‘),
        selected: ‘selected‘,
        visible: {isHide: ‘yes‘, numShow: 400},
        show: function() {
            $(‘#elevator‘).slideDown(400);
        },
        hide: function() {
            $(‘#elevator‘).slideUp(400);
        }
    });

 注意: `data-ielevator-options=‘{"selected": "custome-selected"}` 配置的优先级是最高的

3. simulate elevator + back to top  [单击我看Demo效果]
HTML:

    <div class="elevator" id="elevator" data-elevator-options=‘‘>
        <ul>
            <li><a href="javascript:;" class="custome-selected js-btn">floor1</a></li>
            <li><a href="javascript:;" class="js-btn">floor2</a></li>
            <li><a href="javascript:;" class="js-btn">floor3</a></li>
            <li><a href="javascript:;" class="js-btn">floor4</a></li>
            <li><a href="javascript:;" class="js-btn">floor5</a></li>
            <li><a href="javascript:;" class="js-btn">floor6</a></li>
            <li><a href="javascript:;" class="js-btn">floor7</a></li>
            <li><a href="javascript:;" class="js-backtop">TOP</a></li>
        </ul>
    </div>

Javascript:

    $(‘#elevator‘).ielevator({
        floors: $(‘.js-floor‘),
        btns: $(‘#elevator .js-btn‘),
        backtop: $(‘#elevator .js-backtop‘),
        selected: ‘selected‘,
        visible: {isHide: ‘yes‘, numShow: 400},
        show: function() {
            $(‘#elevator‘).slideDown(400);
        },
        hide: function() {
            $(‘#elevator‘).slideUp(400);
        }
    });

 4. require.js example [单击我看Demo效果]
这是一个require.js的实例

5. 模拟segmentfault文章导航  [单击我看Demo效果]
Javascript:

    // 获取Markdown中的标题
    var $demo = $(‘#demo‘),
        $titles = $(‘h2‘),
        $nav = $demo.find(‘.list‘),
        $highlight = $demo.find(‘.highlight‘),
        STR = ‘‘;
    // 填充标题
    $titles.each(function(){
        STR += ‘<li><a>‘+ $(this).text() +‘</a></li>‘;
    });
    $nav.html(STR);
    // 调用ielevator
    $demo.ielevator({
        floors: $titles,
        btns: $(‘#demo li‘),
        sticky: 10,
        selected: $highlight
    });

 

以上是关于浮动电梯或回到顶部小插件:iElevator.js的主要内容,如果未能解决你的问题,请参考以下文章

JS 回到顶部插件

微信小程序回到顶部

小程序-点击按钮回到顶部1

js---小火箭回到顶部

2018.6.29 省选模拟赛

小程序之一键回到顶部和获取滚动条当前位置