Current position: home page > Website Design >A jquery with a microblog button returns the top effect code

A jquery with a microblog button returns the top effect code

Author: blueleaf Classification: Website Design Time: October 16, 2013 Browse: 10870 Comments: 4

No more nonsense, just code, this is a microblog button jquery Return to the top effect code, which is compatible with IE8, Firefox, Google and all webkit kernel browsers. If you like, please read the preview and choose to download it yourself. Copy the code to your website according to the instruction format, which is easy to understand.

Demo address: https://lanye.org/demo/Jqweibo/

 For the JQUERY code part, copy the code before</head>. <script src=" http://libs.baidu.com/jquery/1.7.1/jquery.min.js " type="text/ javascript "></script> <script type="text/javascript"> //scrolltotop $(function(){ //First hide # back to top $("#totop").hide(); //When the scroll bar is less than 100 pixels from the top, the jump link appears, otherwise it disappears $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#totop").fadeIn(); } else { $("#totop").fadeOut(); } }); //After clicking the jump link, return to the top of the page $("#totop").click(function(){ $('body,html').animate({scrollTop:0},500); return false; }); }); });  </script>
 The CSS part is copied to the CSS style of your website. #share {position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-34+"px"); bottom:34px;left:95%;width:30px;zoom:1;} #share a{background-image:url(images/share.png);  background-repeat:no-repeat; display:block; width:30px; height:30px; margin-bottom:2px; overflow:hidden; text-indent:-999px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;} #share a{} #share .sina {background-position:0 0;  position:absolute; bottom:32px;} #share a.sina:hover { background-position:-30px 0;} #share .tencent { background-position:0 -30px;  position:absolute; bottom:0;} #share a.tencent:hover { background-position:-30px -30px;} #share a#totop{background-position:0 -120px; position:absolute;bottom:64px;cursor:pointer;} #share a#totop:hover {background-position:-30px -120px;}
 The html code is copied to the</body>code after modification. <div id="share"> <a id="totop" title="">Return to the top</a> <a href=" http://t.qq.com/lanyesorg "Target=" _blank "class=" sina ">Follow Blueleaf Sina Weibo</a> <a href=" http://t.qq.com/lanyesorg "Target=" _blank "class=" tencent ">Follow Tencent Weibo</a> </div>

Disclaimer:

Website: Click Copy to share with friends!

All content resources shared by this website, if not noted, are original by Blueleaf. If you need to reprint, please indicate the source; Please contact us in case of infringement Contact handling Please understand!

Comment List
 blink the eyes kiss Growl happy think poor It's embarrassing Grievance ha-ha hush Right hum Zuo Hum Hum doubt A bad laugh Make money Sadness Be cool Seduce fierce handshake yeah Hee hee Shyness applause greedy Madness Embrace gather and watch Mighty awesome
Submit comments

Clear information
Close Comment
 Lazy fish
Lazy fish tourist
#4
This effect is good, take it away, hehe
2013-11-29 09:43 reply
 Unique discount code
Unique discount code tourist
#3
The code font is too small. I copy it to editplus
2013-10-24 10:55 reply
 Talent City
Talent City tourist
#2
This is really a good thing. It is worth studying, discussing and learning. Thanks for sharing!!!
2013-10-21 14:45 reply
 Hikers Home
Hikers Home tourist
#1
Very good, good
2013-10-17 11:30 reply
music appreciation
Back to top