GOOCODE - Find your code/scripts

1 The mobile Internet era, we can pass the information "sweep swept away" feature to easily get in the mobile terminal needs. Today I have to share a WEB function, it is a small floating toolbar on the right side of the page, we can use it to quickly locate the page up and down position, you can eject the micro-channel or two-dimensional code page address two-dimensional code, so like in the phone read on mobile devices and other friends easy access to information.

HTML
First, we prepared the right side of the floating layer content, toolbar has up and down arrow button, and then a "feedback" link, you can click on the feedback information page of your site, there is a two-dimensional code button will pop up a two-dimensional slide on mouse code picture, then we use the two-dimensional code .popPanel to place pictures, .arrowPanel is used to make the direction of the arrow. In this example, I use a background image as a toolbar, the practical application of course we can also add more functions in accordance with the actual needs of the button.

<div id="floatPanel">
	<div class="ctrolPanel" style="right:150px;">
		<a class="arrow" href="#"><span>Top</span></a>
		<a class="contact" href="#" target="_blank"><span>Feed</span></a>
		<a class="qrcode" href="#"><span>2D</span></a>
		<a class="arrow" href="#"><span>Bot</span></a>
	</div>
	
	<div class="popPanel" style="right:196px;">
		<div class="popPanel-inner">
			<div class="qrcodePanel"><div id="code"></div><p>Scan two-dimensional code by mobile to see the post</p></div>
			<div class="arrowPanel">
				<div class="arrow01"></div>
				<div class="arrow02"></div>
			</div>
		</div>
	</div>
</div>

CSS
We use CSS to be fixed on the right side of the toolbar, position: fixed at play here, but also note the use of the value to be bigger z-index, because we want the tool bar has been able to top the other elements on the page, which is possible cover other elements. Specifically look at the following code:

#floatPanel .ctrolPanel{width:36px;height:166px;background:#fff url(panel_bg.gif) no-repeat left top;border:solid 1px #ddd;position:fixed;right:25px;top:300px;overflow:hidden;z-index:10000;} 
#floatPanel .ctrolPanel a{width:34px;font-size:12px;color:#ff6600;letter-spacing:1px;text-align:center;overflow:hidden;} 
#floatPanel .ctrolPanel .arrow{height:29px;line-height:28px;display:block;margin:1px auto;} 
#floatPanel .ctrolPanel .arrow span{display:none;} 
#floatPanel .ctrolPanel .arrow:hover{background:#f4f4f4;} 
#floatPanel .ctrolPanel .arrow:hover span{display:block;} 
#floatPanel .ctrolPanel .contact{height:60px;display:block;margin:2px auto;} 
#floatPanel .ctrolPanel .contact span{line-height:90px;} 
#floatPanel .ctrolPanel .qrcode{height:40px;display:block;margin:2px auto;} 
#floatPanel .ctrolPanel .qrcode span{display:none;} 
 
.popPanel{width:205px;height:214px; position:fixed;right:90px;top:300px;z-index:10000;overflow:hidden;display:none; } 
.popPanel-inner{width:205px;height:220px;position:relative;overflow:hidden;} 
.arrowPanel{width:10px;height:210px;position:absolute;right:1px;top:102px;} 
.arrowPanel .arrow01{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #ddd;position:absolute;bottom:0;position:absolute;left:2px;top:0;} 
.arrowPanel .arrow02{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #fff;position:absolute;bottom:0;position:absolute;left:0;top:0;} 
.qrcodePanel{width:194px; height:212px; background:#fff;text-align:center;border:solid 1px #ddd;position:absolute;left:0;top:0;overflow:hidden;} 
.qrcodePanel img{width:174px;height:174px;border:none;padding:5px 5px 0px 5px;} 
.qrcodePanel p{font-size:12px;color:#666;line-height:20px;letter-spacing:1px;} 

jQuery
This example is based on jQuery, jQuery library must be loaded.
When you click on the up arrow .arrow, animate, page scroll to the page header, when you click the down arrow .arrow, the page scroll to the bottom of the page, which uses the scrollTop, when scrollTop value of 0 indicates that the page header, as the total height of the page to the bottom of the page said. Then when the mouse slide on a mobile terminal icon will pop up to the left of a two-dimensional code pattern, also uses animation function animate () to set the width of the changes by the pop-up display of results, please see the detailed code:

$(function(){ 
    $("#floatPanel a.arrow").eq(0).click(function(){ 
        $("html,body").animate({scrollTop :0}, 300); 
        return false; 
    }); 
    $("#floatPanel a.arrow").eq(1).click(function(){ 
        $("html,body").animate({scrollTop : $(document).height()}, 300); 
        return false; 
    }); 
 
    var panel = $(".popPanel");     
    var w = panel.outerWidth(); 
     
    $(".qrcode").hover(function(){ 
        panel.css("width","0px").show(); 
        panel.animate({"width" : w + "px"},300); 
    },function(){ 
        panel.animate({"width" : "0px"},300); 
    }); 
     
});