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

Разместил / Просмотров: 12 801 / комментария 64

Здравствуйте, дорогие читатели блога. Сегодня хотелось бы рассказать Вам как сделать красивую стрелку для авто прокрутки снизу вверх страницы с использованием 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="http://beloweb.ru/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="http://beloweb.ru/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;
}

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

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

Посмотреть пример

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

  • Marat

    Здравствуйте. Сделал я эту стрелку, всё отлично работает. Но почему-то отображается стрелка только в Мозилле, а в ГуглХроме, Сафари и IE ничего. В чем проблема?

  • Marat, у меня в Хроме стрелка на Вашем сайте работает отлично, с IE дела обстоят иначе, потому что он почти не поддерживает CSS3, в Сафари пока что нет возможности проверить, проверю, напишу.

    И ещё — обновите Хром и должно всё заработать.

  • хорошая статья, автору большое спасибо, прокручивает очень плавно, мне нравится. Удачи!

  • Сергей, очень рад, что Вам понравилось :-)

  • Карен

    Спасибо, действительно классная стрелка. Очень простой способ реализации.

  • Карен, спасибо, очень рад, что Вам понравилось :-)

  • Здравствуйте, Александр!
    Буду очень признателен, если подскажите, как сделать чтобы стрелочка отображалась в правом нижнем углу?
    Заранее благодарю!

  • Денис, я пробовал стрелку поставить вниз и у меня ничего не получилось. Скорее всего этот скрипт написан так. Советую другую стрелку использовать.

    Но всё же если кто знает подскажите как это сделать.

  • Да ничего, Александр! Мне и эта по душе! Да и люди уже заходят и спрашивают, как себе поставить! Пусть пока стоит, может со временем что придумаем! Если, что узнаете отпишите пожалуйста!
    Благодарю за ответ!

  • Денис, если найду решение, обязательно напишу.

  • Евгений

    .scroll-to-top-button {
    background: #666 url(Upload.png) 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: 3px;
    cursor: pointer;
    padding: 15px;
    margin-left: 20px;
    margin-top:49%;
    }

  • Настя

    Я новичок и изучаю веб-мастерство всего несколько дней, ссылку на сайт выкладывать не буду, дабы не позориться. Но стрелочку вставить получилось именно из вашего урока. Много уроков перепроб., но не получалось, а тут вдруг…. Все зависит от автора! У вас талант — обучать!

  • Настя, спасибо огромное, очень приятно. Почему стесняетесь ссылку на сайт ставить? Все когда то с чего то начинали. :-)

  • Александр Черников

    Отличный у Вас Сайт Александр.И статья очень хорошая,спасибо.

  • Александр, спасибо огромное :-)

  • Настя

    Да просто там пока еще не чего нет, вот когда доделаю (лет через 10) :) А кстати! Как сделать такую же стрелочку, но чтобы вниз указывала, можно даже без прокрутки, для того что бы видели, что на странице и ниже есть информация? :) Если кто подскажет буду благодарна :)

  • Настя, а смысл стрелки какой будет, если она указывает вниз, а при нажатии ничего не происходит? :-)

  • Настя

    Ну для людей, что бы видели, что на странице и ниже есть информация :) Не все же знают, что страницу еще можно и вниз прокручивать…. Или я ошибаюсь?

  • Ну не знаю, мне кажется, что пользователь уже интуективно прокручивает её вниз :-) По сути нет смысла ставить такие стрелки.

  • Куда надо пихать
    ————————————————————————————————————
    .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;
    }

    ————————————————————————————————————

  • И что это такое?
    А это тег такой!
    Так, хорошо, надо подумать…

  • В стили CSS на сайте. У Вас должен быть файл style.css вот туда и нужно данный код вставлять.

  • Давно хотел такое на сайт поставить. Просто не знал как. Спасибо огромное!

  • На здоровье, Юрий :-)

  • А никто не знает, как кнопку разместить внизу слева страницы?

  • Юрий, в исходниках в скрипте jqueryarrow.js нужно изменить top на bottom и right на left.

  • Спасибо

  • Кнопка переместилась на лево, но все еще находится наверху…

  • Игорь

    Отличная статья. Написано все очень обстоятельно и доходчиво.

  • Игорь, очень рад, что Вам понравилось :-)

  • Игорь

    Александр, у Вас очень хороший блог, познавательный и качественно сделанный, с отличнейшей навигацией. Все статьи написаны просто, без «наворотов». Больше всего раздражает, когда человек скачал «буржуйский» скрипт, сам в нем ничего не понял, а в статье, мало что указывает что сам его придумал, так еще «учит» как такое сделать, ничего толком не пишет, а только прикрывается терминами из справочника. Поэтому я читаю только иностранные блоги и очень приятно, что и у нас есть такой блогер как Вы, а то совсем за державу обидно )))

  • Игорь, какие слова :-) мне так приятно, честно! Спасибо Вам огромное огромное!!! Я буду стараться, честно! По поводу навигации, отдельное спасибо, потому что мне очень важно такое мнение. И я рад что для пользователей она удобная. Ещё раз спасибо :-)

  • Дмитрий

    Саня, ну вот ни как у меня не получается стрелку сделать, вроде делаю всё правильно. Библиотеку прикрепил, скрипт вставил, путь на него прописал, картинку закинул, путь до неё в стилях прописал, скрипт работы стрелки добавил.
    Ну вот нету её и всё. :)
    В нете много примеров подобного рода, но предложенный тобою мне кажется более простым.
    Даже не знаю что и делать :(
    Пи.Си. Браузер хром.

  • Дмитрий, мне нужно посмотреть как Вы всё делаете. На Вашем сайте я не увидел прикреплённую библиотеку.

  • Дмитрий

    Я экспериментировал на этом сайте http://setiya.ru/
    Картинка и файл скрипта лежат в папке img

  • Дмитрий, на этом сайте в хидере не стоит библиотека. Или куда Вы её ставили?

  • Дмитрий

    В хедер и поставил:

    $(document).ready(function(){
    $.autoScroll({
    scrollDuration: 2000,
    showDuration: 400,
    hideDuration: 300
    });
    });


    CMS WordPress в текущую тему нужно ставить?

  • Дмитрий

    Ну так и сделано :)
    Только вот в коде страницы действительно нет :(

  • Дмитрий, вот это Вы ставили? type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js»

  • Дмитрий

    Конечно. Можно в скайпе связаться? А то здесь мы развели писанину :) Мой маил у вас есть.

  • Дмитрий, давайте лучше в контакте http://vk.com/id16907296

  • mrserzh

    Здравствуйте. Странно, но не показывается. Проверил в разных браузерах. В CSS установил, скрипты на страницу (не на все пока, но на стартовую и первого фильма) поставил. На ресурсе стоит JQ 1.7.2. Пробовал и скрипт с базой 1.7.1 поставить, как в примере указано. Не показывает.

  • Здравствуйте, mrserzh. А стили для стрелки установили?

  • mrserzh

    Перепроверил всё. CSS устанновлен, ссылка на кнопку изменена. Стиль (если вы о файле JS в архиве) тоже. Скрипт стоит до . Результата не видно :(

  • Прикольная стрелка. Весьма стильно выглядит, но вот под мой дизайн не подходит.

  • aleksmens, Вы можете с лёгкостью заменить стрелку в стилях на свою :-)

  • Я тут наткнулся на проблему одну,эта стрелка у меня ни как не хотела работать,я уже что только не делал….Решил проблему смешным образом в скрипте убрал <a href="
    было так

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js«>
    стало так

    http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js«>

    Не знаю может кому и помог чем то(я не спец, я только начинаю в этом разбираться)

  • как сделать что бы была только вида одна стрелка без прозрачной обводки?и вообще без прозрачности…

  • Сержик, здесь background: #666 url(Upload-icon.png) center center no-repeat; удалите #666

  • Александр доброго время суток….
    У меня вопрос к вам, как поставить себе на сайт вот такое текстовое окно как на этом сайте?
    http://jemand.ru/vydvigayushhayasya-pri-prokrutke-stranicy-panel/

  • Там же подробно описано как это сделать. :-)

  • Где?

  • Ну Вам нужно то окно всплывающее о котором рассказывается?

  • Нет…Вы меня не так поняли))) мне нужно то окно на котором он показывает сам текст скрипта, CSS, HTML…Я хочу тоже вставить это текстовое окно себе на сайт….

  • У Вас сайт на вордпресс?

  • нет

  • Тогда с помощью стилей CSS. В одном комментарии не рассказать.

  • А как это текстовое окно называется?может я в нете гляну…

  • По разному его называют :-) Даже не могу сказать

  • Александр давайте мы спишемся с вами на форуме? и вы мне расскажете как такое текстовое окно можно сделать….

  • списаться можно в любое удобное для вас время…

  • Давайте, лучше вКонтакте https://vk.com/id16907296

  • В контакте мне не очень, не удобно там….
    Вот форум мой (он на тесте пока, вчера только созданный) http://gribemlopatoy.vv.si/43/viewtopic.php?f=7&t=2
    Здесь поудобней будет я думаю
    зайдёте на него по:
    логин Test
    пароль 111111
    я уже там вас жду…

  • Никита

    круто!