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的更多相关文章

  1. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  2. Jquery回到顶部插件【query.scrollUp.js】使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  3. 小程序scroll-view实现回到顶部

    一.wxml页面:catchtap阻止冒泡事件. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop ...

  4. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  6. 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  7. HTML 回到顶部 浮动

    回到顶部 <div id="FloatDIV" style="position: absolute; top: 0px; z-index: 9999; backgr ...

  8. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

  9. 页面上常用的一些小功能--QQ、回到顶部

    1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...

随机推荐

  1. js入门篇之正则表达式基础

    定义:正则用于规定在文本中检索的内容,它是对字符串执行模式匹配的强大工具 RegExp(正则表达式) 对象的语法: new RegExp(pattern, attributes); pattern为一 ...

  2. window自动任务实现数据库定时备份

    原理:利用window定时任务定时cmd加载mytask.bat文件,bat运行php.exe程序编译运行mytask.php文件 ,从而实现了数据库的备份 mytask.bat 内容: D:\php ...

  3. mysql排序时索引的注意事项

    参考 'mysql高性能'

  4. Unity Aspect

    Unity封装的东西太多,所以在很多情况下回忽略这些基本的事情.游戏窗口的中Aspect是通过Game窗口中进行选择,但对于相机的Aspect Unity并没有暴露接口在设置界面中,至少在编辑器下进行 ...

  5. Tomcat(多版本)安装注意!

    ♣电脑安装多个版本的tomcat和切换(解压版的apache-tomcat   -5.5.0/   -6.0.45/  -7.0.70  三个版本) ♣tomcat配置环境变量 ♣tomcat5.5. ...

  6. win 10 常见问题

    Microsoft Edge Can't Open Local Domains IE Edge浏览器打不开本地站点 解决方法:解决方法

  7. undefined reference to `libiconv_open 无法编译PHP

    解决方法:#wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz#tar -zxvf libiconv-1.13.1.tar. ...

  8. cache-coherent nonuniform memory access

    COMPUTER OR GANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION

  9. JDBC的使用(一):引用外部jar;代码链接数据库

    一:引用外部jar 1.首先不jar文件放到项目下: 2.在Eclipse中,右键相应的项目--构建路径--配置构建路径--库--添加外部jar:选中-打开-应用-确定. 二:代码链接数据库 1.加载 ...

  10. iOS10 适配、Xcode8配置总结

    随着iOS10的推送更新到来,勤劳的程序员又在加班加点的搬砖了,为此收集了一些iOS10 更新的技能给大伙参考,不断更新喜欢就star 前沿 一.Xcode8 插件你去哪了 以为是和之前一样 Xcod ...