аватар |

Статьи / jQuery /

Как создать кнопку вверх или вертикальное прокручивание страницы на jQuery?


На многих сайтах можно увидеть кнопку или стрелку, которая позволяет быстро, с анимацией, прокрутить страницу вверх. Как же это сделать? Нам достаточно 1 файла с кодом и файла с изображением стрелки или кнопки.

Демонстрация Скачать исходники


Как сделать кнопку вверх jQuery? По шагам



1. Подключаем библиотеку jQuery

Для начала нужно либо скачать библиотеку, либо подключить её с другого сайта. Воспользуемся самым простым способом - подключим google файл.
В <head> вставляем следующий код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Здесь мы подключаем укороченную версию jQuery с google. Но ничто не мешает подключить и готовый файл на компьютере.

2. Вставляем js (jQuery) код

Теперь вставляем непосредственно jQuery код, который будет при прокрутки страницы (scroll) до определённого уровня плавно показывать (fadeIn) стрелку, которая в свою очередь, плавно возвращает к началу страницы.

Данный код можно скопировать либо в отдельный файл, либо также вставить в <head> предварительно 

<script type="text/javascript">
jQuery( document ).ready(function($){
    var 
    speed = 500,
    $scrollTop = $("<a/>")
      .addClass('scrollTop')
      .attr({href:'#', style:'display:none; z-index:9999; position:fixed;'})
      .appendTo('body');        

    $scrollTop.click(function(e){
        e.preventDefault();

        $( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
    });

    //появление
    function show_scrollTop(){
        ( $(window).scrollTop() > 300 ) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut(600);
    }
    $(window).scroll( function(){ show_scrollTop(); } );
    show_scrollTop();
});
</script>


3. Оформляем внешний вид стрелки и страницы - CSS

Переходим к оформлению. Нижеуказанный код тоже можно вставить в головную часть документа. 

<style>
.scrollTop{
    background:url('путь.png') 0 0 no-repeat;
    width:50px;
    height:70px;
    bottom:10px;
    left:48%;
}
.scrollTop:hover{ background-position:0 -76px; }
</style>

Создаём класс, где стрелка будет в качестве фона. Изображение двойное (спрайт). Часть чёрно-белое, другая цветная. Вместо путь.png вставляем адрес к изображению. Относительно файла с css.



Итак, размер картинки - 50х140 пикселей. Но показывать каждый раз мы будем только часть: размером width:50px; height:70px . При наведении (.scrollTop:hover) достаточно заменить позицию, то есть часть отображаемого изображения, background-position:0 -58px .

Готово!

Спасибо за внимание!
 



Распечатать
Похожие статьи
16 апреля 2014 17:33 Открыть или скрыть блок при выборе чекбокса jQuery
29 мая 2014 12:42 Плавное открытие и скрытие блока div средствами jQuery
27 ноября 2013 18:55 Как сделать изображения чёрно-белыми и обратно средствами jQuery и CSS?
01 мая 2014 12:04 Проблемы с кодировкой в jQuery Ajax и PHP
19 июня 2014 11:00 Эффект лупы или как зумировать изображение на jQuery


Комментарии к статье (vk.com)