Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS

14 922 любопытных

Здравствуйте, дорогие читатели блога. Сегодня хотелось бы рассказать Вам как сделать красивую стрелку для авто прокрутки снизу вверх страницы с использованием CSS и JQuery. Данный способ можно использовать для любых типов сайтов, в том числе и для блогов WordPress. Уверяю Вас, здесь ничего сложного нет, просто нужно будет добавить скрипт и не много стилей, вот и всё :-)

Пример ι Скачать исходники

И так поехали.

JQuery

Для начала на нам нужно будет прикрепить на сайт библиотеку JQuery, конечно же если она у Вас не стоит, если стоит, тогда пропустите эту часть.

Здесь нужно просто между тегами <head> и </head> поставить следующее:

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

Затем, опять же перед тегом </head> нужно прикрепить сам скрип JQuery стрелки. Его с примером и исходниками Вы сможете скачать здесь. Теперь добавляем:

<script type="text/javascript" src="Ссылка на скрипт"></script>

В моём случае получилось вот так:

<script type="text/javascript" src="https://beloweb.name/demo/arrowup/jqueryarrow.js"></script>

В конечном итоге у вас должно получиться следующее:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://beloweb.name/demo/arrowup/jqueryarrow.js"></script>

Но и это ещё не всё, теперь нам стрелку нужно заставить работать, для этого опять между <head> и </head> поставьте следующий скрипт:

<script type="text/javascript">
$(document).ready(function(){
    $.autoScroll({
        scrollDuration: 2000,
        showDuration: 400,
        hideDuration: 300
    });
});
</script>

CSS

И теперь после того как мы справились с JQuery скриптами нам нужно добавить стили CSS, так сказать украсить кнопку. Даже не то чтобы украсить, а чтобы вообще её видно было :-)

.scroll-to-top-button{
    background: #666 url(Upload-icon.png) center center no-repeat;
    width: 32px;
    height: 32px;
    color: #fff;
    font-family: verdana;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    margin: 20px;
}

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

Вот в принципе и всё. Так же обязательно посмотрите пример того, что у меня получилось