Добавляем кнопку «наверх» на свой сайт

7 комментариев

Я думаю, что многие уже поняли о чем речь. Если нет, прокрутите эту страницу немного вниз, а потом нажмите на стрелку в левом верхнем углу. Такую анимацию очень просто создать при помощи JQuery.

Плавное возвращение наверх при клике — как в Google Plus

Первым делом, создадим подключаемый JavaScript-модуль

main.js

$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();

    $(function () {
             $(window).scroll(function () {
                     if ($(this).scrollTop() > 200) {
                             $('#back-top').fadeIn();
                     } else {
                             $('#back-top').fadeOut();
                     }
             });

             $('#back-top a').click(function () {
                     $('body,html').animate({
                             scrollTop: 0
                     }, 600);
                     return false;
             });
     });
});

Собственно, этот код и реализует анимацию. Если нужно изменить скорость анимации, меняем значение 600 (перед return) на любое другое в миллисекундах. Не забываем подключать JQuery.

Теперь нужно создать элемент для самой кнопки.

button.html

<section id="back-top">
    <a href="#top"><span></span></a>
</section>

Осталось только навести красоту с помощью css.

style.css

#back-top {
    position:fixed;
    top: 20px;
    left: 20px;
}

#back-top a {
    display:block;
    text-align:center;
    font: 12px Arial, Verdana, Tahoma, sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    color: #333;
}

#back-top a:hover {
    color:#000;
}

#back-top span {
    display: none;
    width:47px;
    height:47px;
    display:block;
    margin-bottom:7px;
    background:url(../images/back-top-button.png) no-repeat center center
}

Готовая web страница с кнопкой

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Back on top button test</title>
        <style>
            body {
              /* For test this script on blank page */
              min-height: 3000px;
            }
            #back-top {
              position: fixed;
              top: 20px;
              left: 20px;
            }

            #back-top a {
              display: block;
              text-align: center;
              font: 12px Arial, Verdana, Tahoma, sans-serif;
              text-transform: uppercase;
              text-decoration: none;
              color: #333;
            }

            #back-top a:hover {
              color: #000;
            }

            #back-top span {
              display: none;
              width: 47px;
              height: 47px;
              display: block;
              margin-bottom: 7px;
              background: url(back-top-button.png) no-repeat center center
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){

                // hide #back-top first
                $("#back-top").hide();

                // fade in #back-top
                $(function () {
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 200) {
                                $('#back-top').fadeIn();
                        } else {
                                $('#back-top').fadeOut();
                        }
                });

                // scroll body to 0px on click
                $('#back-top a').click(function () {
                        $('body,html').animate({
                                scrollTop: 0
                        }, 600);
                        return false;
                });
                });

        });        
        </script>
    </head>
    <body>
        <section id="back-top">
            <a href="#top"><span></span></a>
        </section>
    </body>
</html>

Изображение для самой кнопки здесь, а архив с исходниками тут.

После регистрации реклама на сайте отображаться не будет.
Обсудите статью на форуме.

Комментарии к статье: 7

Подождите, загружаются комментарии...

Оставить комментарий

Если не хотите больше вводить капчу — создайте аккаунт.

Предпросмотр комментария

Ваш комментарий пуст.