Shulou(Shulou.com)06/03 Report--

Editor to share with you how JavaScript to achieve stair rolling effects, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

First go to the effect picture that you want to achieve:

Effect function description: when you click the floating button on the right, click on the corresponding module, the left content area will automatically jump to the module area.

The following is the code:

Document * {margin:0; padding:0;} li {list-style-type: none;} .top {height:900px; background: # ddd;} .footer {height: 600px; background: # ddd } .content {height:800px;} .content H2 {text-align:center; line-height: 80px;} .stairs-list {width: 60px; position: fixed; right:5%; top:50%; margin-top:-120px Background: # fff;}. Stairs-list li {width:50px; height:50px; line-height: 25px; text-align: center; padding:5px; border-bottom:1px solid # ddd;} .stairs-list li.active {color: orangered } .stairs li span {display: block } JD.com second kill feature selection Channel Square to recommend JD.com second kill feature selection for you Channel Square recommends / / OOA: / / 1. Initialization data; / / 2. Event binding; / / 3. Determine the floor according to the scrolltop value; / / 4. Effect added; / / 5. Switch subscript based on click event; function Stairs (options) {this.options = options; this.init ();} Stairs.prototype = {constructor: Stairs, init: function () {/ / content element height array; this.content_ele_offset_top_list = [] / / get the offset height of the element; $(this.options.content_selector) .offset (function (index, coords) {/ / put the height value of each element into the height list; this.content_ele_offset_top_list.push (coords.top); return coords } .bind (this) / / get the minimum height value; var _ length = this.content_ele_offset_top_list.length; this.min_top = this.content_ele_offset_top_list [0] This.max_top = this.content_ele_offset_top_ list [_ length-1] + $(this.options.content_selector). Last (). Height (); this.content_ele_offset_top_list.push (this.max_top); this.bindEvent () }, bindEvent:function () {var $body_html = $("body,html"); / / Save the pointer to the instance object; / / var _ this = this; var instance = this; / / scroll event of high frequency execution; / / Optimization: throttling $(document) .scroll (function () {var scrollTop = $body_html.scrollTop (); this.calStairsIndex (scrollTop);} .bind (this)) $(this.options.stairs_selector) .click (function () {/ / know who the element of the current event is This; because there is no way to handle the jQuery event binding, pass in the element of the current event externally; the this cannot be changed; / / who is the current instance object; this; var index = $(this) .index (instance.options.stairs_selector); instance.changeScrollTop (index) })}, / / calculate the current floor; calStairsIndex: function (st) {/ / did not reach the stair area for isolation; if (st)

This.max_top) {/ / console.log (- 1); this.index =-1; this.changeStairsBtn (); return false}; / / if it is still within the range, there is no need to continue to judge Var _ list = this.content_ele_offset_top_list; / / do not continue searching if st is still within the current index range; if (st > = _ list [this.index] & & st

= _ this.index [I] & & st < _ list [I + 1]) {this.index = I; break;}} this.changeStairsBtn () }, changeStairsBtn: function () {if (this.index =-1) {$(this.options.stairs_selector) .removeClass ("active"); return false } $(this.options.stairs_selector) .eq (this.index) .addClass ("active") .siblings () .removeClass ("active");}, changeScrollTop: function (index) {$("body,html") .scrollTop (this.content_ele_offset_top_ list [index]) / / event trigger; $(document) .trigger ("scroll");}} var staris = new Stairs ({content_selector: ".content", stairs_selector: ".trigger-list li"}); console.log (staris) These are all the contents of the article "how to achieve stair scrolling effects in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.