Скрипт кнопка вверх как на сайте Zornet.Ru
 | |
| Сейчас трудно представить и найти сайт где нет функций кнопки вверх, которая поднимает страницу, что здесь кнопка как на сайте zornet.ru. Изначально эта кнопка шла как остальные стандартные, под одной ссылкой, которая идет на саму кнопку. И она по дизайн сделана темно прозрачная. Но здесь еще добавлен стиль, который отвечает за функцию, что при наведение клика, из под нее появляются тени. Если это темный фон, то вы можете выставить любой оттенок. Но также и поставить оригинальную кнопку, которая бы отлично подошла под дизайн интернет ресурса. Здесь кнопка вверх работает так, сто если вы страницу ниже половины опустили, то она автоматически появиться,. Что аналогично работает по высоте, где то выше половины главной страница и остальных, она будет исчезать, если вы начали поднимать. Все очень просто и понятно, и главное она не грузит портал и работает корректно, где можно ее подогнать а регулировке на портал. Приступаем к установке: В нижнее часть: Код <!-- <Вверх> --> <a href="#" class="scrollup"></a> <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 700) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> <!-- </Вверх> --> CSS: Код /*Knopka Verx*/ .scrollup{width:40px;height:40px;position:fixed;bottom: 185px;right:25px;display:none;text-indent:-9999px;background: url('http://zornet.ru/zorner_ru_1/ABVUSA/vverkh.png') no-repeat;opacity:0.5;} .scrollup:hover{opacity:0.7;border-radius: 50%;box-shadow: 0 0px 13px #393c40;} Чтоб изменить стиль кнопки, то здесь нужен форма PNG и только после переустановки под этот формат все будет корректно смотреться. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
|
| |
