наверх





Давайте создадим простую, но удобную и понятную кнопку наверх, причем с использованием jQuery, а так же HTML CSS. Сейчас эти самые кнопки стали довольно таки популярны, к примеру, эта сама кнопка стоит на сайте ВКонтакте, на подобии которой кнопку мы и будем делать.


Сделать кнопку наверх? Просто и легко, ведь можно использовать лишь ссылку и якорь. А давайте сделаем не просто кнопку, а боковую полоску, которая появится лишь в том случае, когда посетитель промотает страницу вниз.

Сам эффект появления полоски лишь в случае сдвига ползунка вниз будет осуществляться через jQuery. Оформление ползунка, в том числе и его фиксация к боку, а так же прочие эффекты будет происходит на HTML CSS. Кстати, данный вид кнопки наверх очень похож на ползунок наверх, как ВКонтакте, однако, мы не будем полностью копировать, а немного изменим его ;)

HTML



Вставляем между тегами <head> следующий код. Так как, для работы этого ползунка нужен JQuery, то импортируем и его:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="scroll.js" type="text/javascript"></script>   
<script type="text/javascript">    
$(function() {    
$("#goTop").scrollToTop();    
});    
</script>


Сам файл scroll.js вы можете скачать отсюда.

CSS



#goTop {
    /* transition */
    -webkit-transition:All 0.3s ease;
    -moz-transition:All 0.3s ease;
    -o-transition:All 0.3s ease;
    /* transition end */
    
    /* opacity */
    -moz-opacity: 0.40;
    opacity: 0.40;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    /* opacity end */
    
    font:10pt bold "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Размер, толщина, семейство шрифта */

    text-decoration:none; /* Отсутствие нижней линии */
    padding:50px 0; /* Внутренние отступы */
    width:7%; /* Ширина */
    height:100%; /* Высота */
    position:fixed; /* Позиционирование */
    left:0; /* Расположение, прижатие к левому боку экрана. */
    text-align:center; /* Расположение текста */
    color:#898A8B; /* Цвет текста */
}

#goTop:hover {
    color:#575757; /* Цвет текста */
    background:#EAEAEA; /* Фон */
}


То есть, как видите, для того, чтобы расположить ползунок слева, нужно задать left, а чтобы зафиксировать этот ползунок - свойство position, с соответственным параметром.

jQuery



Если открыть файл scroll.js, то что мы там увидим:

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("fast")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("fast")}else{$(scrollDiv).fadeIn("fast")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"fast")})}});


Если хотите, чтобы переход был не плавным, а практически мгновенным, то используйте вышеприведенный код.

Если вам надо, чтобы переход был плавным, то есть плавающим, то используйте следующий код:

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});





Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.