Floating "Elevator" or "back to Top" widget: Ielevator.js

ielevator.js is a jquery widget that uses simple, compatible IE6, supports UMD and 3 configurations, and is more flexible than anchor points.

Default Options

 _defaults = {floors:  null  , Btns:  null  , Backtop:  null  "  -1< Span style= "color: #000000;" >, visible: {ishide:  ' no '  0 speed:  400 function  Span style= "color: #000000;"    > (Me) {me.element.show (); }, Hide:  function   (me) {Me.element.hid    E (); }}

• Floors: A reference to the floor module in the page
• Btns: references to focus graphs
• backtop: Back to the top button reference
• selected: The selected style for the focus chart when scrolling or clicking
• sticky: Simulates position:sticky positioning and can specify the distance from the top of the elevator at the top of the window, by default-1
• visible: Used to control the "elevator" display and hide, when the srolltop value is greater than numshow , display "Elevator", the other is hidden
• Speed: Controls the scroll rate of the slider bar
• Show: You can override this function to customize how the elevator is displayed
• Hide: You can override this function to customize the way elevator is hidden

Installation

NPM Install Ielevator | | Bower Install Ielevator

Use

1. Back to Top "top" [Click I see demo effect]
Html:

<class= "Elevator elevator-backtop"  ID= "Backtop">  <href= "javascript:;" class = "Js-backtop" > TOP</a></div>　

Javascript:

$ (' #backtop '). Ielevator ({  backtop: $ (' #backtop. Js-backtop ')});

Just get the 'backtop' quote, it's that simple!

2. Simulate Elelvator [click I see demo effect]
Html:

<Divclass= "Elevator"ID= "Elevator"data-elevator-options= ' {' selected ':"custome-selected"} '>  <ul>    <Li><ahref= "javascript:;"class= "custome-selected js-btn">Floor1</a></Li>    <Li><ahref= "javascript:;"class= "Js-btn">Floor2</a></Li>    <Li><ahref= "javascript:;"class= "Js-btn">Floor3</a></Li>    <Li><ahref= "javascript:;"class= "Js-btn">Floor4</a></Li>    <Li><ahref= "javascript:;"class= "Js-btn">Floor5</a></Li>    <Li><ahref= "javascript:;"class= "Js-btn">Floor6</a></Li>    <Li><ahref= "javascript:;"class= "Js-btn">Floor7</a></Li>  </ul></Div>

Javascript:

    $ (' #elevator '). Ielevator ({        floors: $ ('. Js-floor '),        btns: $ (' #elevator. Js-btn '),         ' selected ',        ' yes ', numshow:400},        function() {            $ ( ' #elevator '). Slidedown;        },        function() {            $ (' #elevator '). Slideup (+);        }    });

Note: ' data-ielevator-options= ' {' selected ': ' custome-selected '} ' is configured with the highest priority

3. Simulate elevator + back to top [click I see demo effect]
Html:

    <Divclass= "Elevator"ID= "Elevator"data-elevator-options= ' '>        <ul>            <Li><ahref= "javascript:;"class= "custome-selected js-btn">Floor1</a></Li>            <Li><ahref= "javascript:;"class= "Js-btn">Floor2</a></Li>            <Li><ahref= "javascript:;"class= "Js-btn">Floor3</a></Li>            <Li><ahref= "javascript:;"class= "Js-btn">Floor4</a></Li>            <Li><ahref= "javascript:;"class= "Js-btn">Floor5</a></Li>            <Li><ahref= "javascript:;"class= "Js-btn">Floor6</a></Li>            <Li><ahref= "javascript:;"class= "Js-btn">Floor7</a></Li>            <Li><ahref= "javascript:;"class= "Js-backtop">TOP</a></Li>        </ul>    </Div>

Javascript:

 $ (' #elevator '  '. Js-floor ' ), Btns: $ ( ' #elevator. Js-btn '  ' #elevator. Js-back Top '  ' selected ' , visible: {is Hide:  ' yes ', Numshow:400 ', show:  functio        n   () {$ ( ' #elevator '). Slidedown (400 function   () {$        ( ' #elevator '). Slideup (400

4. require.js example [click I see demo effect]
This is an example of a require.js

5. Simulate Segmentfault article navigation [click I see demo effect]
Javascript:

    //get the title in Markdown    var$demo = $ (' #demo '), $titles= $ (' H2 '), $nav= $demo. Find ('. List ')), $highlight= $demo. Find ('. Highlight ')), STR= ' '; //Fill title$titles. each (function() {STR+ = ' <li><a> ' + $ ( This). Text () + ' </a></li> ';    });    $nav. HTML (STR); //Call Ielevator$demo. Ielevator ({floors: $titles, Btns: $ (' #demo Li '), Sticky:10, selected: $highlight});

Floating elevator or back to top widget: ielevator.js