Create back to top button

Let's take a look at the effect first. In the first case, when the page is at the top, the back-to-top button does not appear. In the second case, when the page leaves the top of the page for a certain distance, the back-to-top button appears and the next step is the analysis of the code: here if we want to use rolling...

In the first case, when the page is at the top, the back-to-top button does not appear.

Here, if we want to use a rolling event, the applet requires that the outermost layer must be wrapped using the scroll-view label, then, set scroll-y = "true" to allow vertical page scrolling. scroll-top is to scroll to the top for processing. generally, an event is bound, and bindscrolltolower works in the same way, scroll to the bottom for processing. bindscroll indicates that this event is triggered during rolling. In the following WXML, we will go back to the top button settings. when we click it, we will bind an event goTop so that its scroll height is equal to 0, so that it will return to the top.

WXML code:

         
          
//*********************
                      
           
            
Top
                 
          //*********************
         

JS code:

// Return to the top Page ({data: {scrollTop: 0}, goTop: function (e) {this. setData ({scrollTop: 0})}, scroll: function (e, res) {// assign the scroll distance to this when the container is rolling. data. scrollTopif (e. detail. scrollTop> 500) {this. setData ({floorstatus: true});} else {this. setData ({floorstatus: false });}})

WXSS code:

BigWrap {background: # eee;}/goTop back to the top icon start /. com-widget-goTop {position: fixed; bottom: 125px; right: 5px; background: rgba (0.48, 0, 50%); border-radius:; overflow: hidden; z-index: 500 ;}. com-widget-goTop. icon-gotop {background-color: rgba (0.8, 0,); display: inline-block; width: 50px; height: 50px; line-height: 68px; font-size: 12px; color: # ffffff; text-align: center; border-radius: 50%; background: url (http://m.dev.vd.cn/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center-1110px; -webkit-background-size: 50px auto ;}

The above is the details of making the button back to the top. For more information, see other related articles on php Chinese network!