JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<p style="display: block;background: #F4F4F4;padding: 10px;text-align: center;">Демо к статье <a href="http://truemisha.ru/blog/vkontakte/top-button-advanced.html">Дополнительные модификации кнопки «Наверх»</a></p>
<p>Lorem ipsum dolor sit amet, nam at doming menandri facilisis, te vero vituperata qui. Vim at labores mediocritatem, cum ut tota omittam placerat. Diceret cotidieque dissentiunt an vis, reque atqui at vis. Ea has quot habeo consequuntur, ne est quodsi volutpat argumentum. Eruditi gloriatur sed cu, accusamus reformidans definitionem has ad, duo ex recusabo mnesarchum. Qui affert commodo constituam no.
</p>
<p>
Duo autem aeque verterem at, no novum paulo vis. Sed eu labore offendit nominati. Per in viderer ocurreret assueverit, debet oporteat cu his. Vix agam quas elaboraret ea, his omnis dicam eu. Fugit feugait sadipscing has te, euismod aliquam an sit.
</p>
<p>
Eam eu copiosae eleifend rationibus, aeque causae in vix, cu elit sapientem vulputate usu. Nec eu simul reprehendunt. Eos ea elitr antiopam petentium, altera persius vel ne, aeque efficiantur quo ad. Nec et vero patrioque, has ut audire delicata, mea natum dolore et. Sit tota voluptatibus no, usu rebum eruditi ne, usu ad audire suavitate constituto.
</p>
<p>
Quo ex debet vivendo sadipscing, id summo tollit pri, cum deleniti luptatum ne. Ne eos vidisse luptatum suscipiantur, ut eos consul honestatis, eu errem commune detraxit ius. Viris ubique vis ea, ius vero ullum no. Sit ei legere volutpat, has meis ipsum no, cu purto saepe sit. Labore detraxit pertinacia cu quo. Volumus adipisci delicata ad duo.
</p>
<p>
Nec an quis mutat, usu albucius torquatos adipiscing eu, eum inani voluptatibus eu. Ad qui suas alia verear, vim tation pertinacia cu, ei agam virtute graecis pri. Oblique nusquam appetere mea ut, qui idque scriptorem no, ne modo meis soluta nam. Falli admodum accusata in duo, pro erant tantas adversarium ut. Vis no dicta possit electram,...
CSS
/* стили самой кнопки */
#top-link{
cursor:pointer;
display:none;
position:fixed;
left:0px;
top:0px;
/* прилепим кнопку к нижней части страницы,
то, что в вконтакте она сверху, это ИМХО бред */
padding-left:5px;
padding-top:5px;
z-index:1;
padding-right: 0px !important;
width: 120px;
opacity: 0.3;
}
#top-link:hover, #top-link:active {
background: #000;
opacity: 0.3;
}
.veryhidden{
position: absolute !important;
left:-5555px !important;
}
#top-link a {
display: block;
width: 100px;
text-align: center;
/*background: #333;*/
color: #000;
padding: 5px 0;
text-decoration:none !important;
}
#top-link:hover a{
/* background:#000;*/
color: #fff;
}
/*#topicon{
width:0;
height:0;
display:inline-block;
border-bottom:7px solid #333;
border-left:7px solid transparent;
border-right:7px solid transparent;
margin-right:5px;
}
#backicon{
width:0;
height:0;
display:inline-block;
border-top:7px solid #333;
border-left:7px solid transparent;
border-right:7px solid transparent;
margin-right:5px;
}*/
JavaScript
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
jQuery.fn.topLink = function(settings) {
settings =...