![Scroll to Top widget Smooth Jquery Scroll to Top widget](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2i6-ADMUEEsA8mO8Shbs31MmZoid4M3sW_SF5jol1JpIevJ-3tu8mhBaKvBGa_XGV5rhga1N5O_Ejp9NP6UXVm1YXZIej0ZHb712V0M-XUP960gfuDYV-9mEQetWscqOM-fT0wqWSbIUt/s1600/Smooth+Jquery+Scroll+to+Top+widget.jpg)
Hey friends today i will give you amazing Smooth Jquery Scroll to Top widget it is best scroll to top button for blogger.
Why it is best?
It is best because it is having smooth go to top effect also i added css mouseover effect to it, by which whenever you will put your mouse over it,It will increase it side.
Installation
Copy the below code and paste it in html/javacript of your blog.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://netoopsblog.blogspot.com"></a><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>/>
Now just save it and play with this awesome hover effect button :)
0 comments:
Post a Comment