Avatar

Полезные скрипты HTML/JS (HTML, JS, another tricks)

by Turboblack ⌂, Monday, July 22, 2024, 06:32 (77 days ago) @ mak

Setting the button "up" to any theme

Step 1. Add the JavaScript in the site template before the closing </ head>

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

Step 2. Add the html-code in the template of the site before the closing </ body>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Step
3. Add the CSS-style block and button up in the file style.css
(style.css file name you can have both, but it does not matter, add the
code in any style file that connects to the site).

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://yourpageadress/up.png) no-repeat 50% 11px;border-radius:7px;}

Change path to the image on your's server ;-)

--
We live in the distant past, we are still not at all civilized

Tags:
up button


Complete thread:

 RSS Feed of thread