Кнопки с функцией вверх и вниз на сайт
 | |
| Серые по своему дизайн кнопки для поднятие и опустить страницу на сайте. Все полностью создано на стилях и нет в нем не одной ссылки. Будут стоять с правой стороны монитора, также на них есть эффект. Который заключается в том, что при наведение из серой гаммы становится темнее, и безусловно знак виде пальца. Здесь тематика безусловно разная и можно сказать на любой сайт или блог можно поставить. Также нужно заметить, что идет плавный скролинг, что гораздо лучше быстрого и все с разбегом поднимает. Если будет показывать сразу 2 кнопки, то означает, сто вы опустили страницу или подняли и она находиться по центру или внизу, а так всегда вы будете видеть одну основном, когда выше поднимете и наоборот. Установка: В низ сайта ставим Html для отображения кнопок. Код <!-- Кнопки Вверх и Вниз --> <div class="go-up" title="Вверх" id='ToTop'>☝</div> <div class="go-down" title="Вниз" id='OnBottom'>☟</div> <!-- / Кнопки Вверх и Вниз --> И тут же далеко не уходим а ставим ниже скрипт. Код <!-- Кнопки Вверх и Вниз --> <script> $(function(){ if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow") $(window).scroll(function(){ if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow") else $("#ToTop").fadeIn("slow") }); if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow") $(window).scroll(function(){ if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow") else $("#OnBottom").fadeIn("slow") }); $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")}) $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")}) }); </script> <!-- / Кнопки Вверх и Вниз --> CSS Код .go-up, .go-down { display: none; position: fixed; /*позиционирование*/ z-index: 9999; /*поверх все элементов на странице*/ right: 1%; /*положение на странице, если слева - left*/ background: #4F4F4F; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; color: #fff; text-align: center; font: normal normal 32px/32px sans-serif; text-shadow: 0 1px 2px #000; opacity: .5; padding: 3px; margin-bottom: 5px; width: 32px; height: 32px; } .go-up { bottom: 60px; } .go-down { bottom: 10px; } .go-down:hover, .go-up:hover { opacity: 1; box-shadow: 0 5px 0.5em -1px #666; } PS - как видим кнопки сделаны красиво на стилях, что вам позволить изменить оттенок, если не вписывается по дизайн своему. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 12 | |
| |
