Главная » Вебмастеру » Как сделать на сайте кнопку «Наверх» как ВКонтакте

Как сделать на сайте кнопку «Наверх» как ВКонтакте

2015-02-27 / Вр:00:08 / просмотров: 3224

Огромная часть населения бывшего СССР пользуется социальной сетью ВКонтакте. Если у вас есть личная страница ВКонтакте, вы наверняка не только обращали внимание, но и пользовались полезной кнопкой «Наверх». Иногда страница достигает больших размеров и, чтобы подняться наверх, приходится очень долго крутить колесико мышки. Так вот, все я это введу к тому, что в этой статье, я расскажу, как сделать на сайте кнопочку «Наверх» по оформлению такую же, как в социальной сети ВКонтакте.
Вы можете посмотреть пример, как это выглядит:

[посмотреть пример]

Ну как, впечатлены?

Ну, теперь перейдем к самому веселому – коду. Некоторых пугает это слово «код». Бояться здесь нечего, нужно просто повторить все, что я делаю в примерах.

1. Для начала подключим библиотеку jQuery:

<script ENGINE="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js "></script>

Код вставляется перед </head>

2. Далее вставляете небольшой javascript код:

<script>
jQuery(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 50)
            jQuery('a#bloggood-ru_up').fadeIn(600);
        else
            jQuery('a#bloggood-ru_up').fadeOut(600);
    });
    jQuery('a#bloggood-ru_up').click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 0);
        return false;
    });
});
</script>

Код вставляется перед </head>

Настройки:
Строка №4 – «50» – это количество прокрученных пикселей, через которое появится кнопка.
Строка №5 – «600» – отвечает за время появления кнопки (в миллисекундах).
Строка №7 – «600» – отвечает за время исчезновения кнопки (в миллисекундах).

3. Добавляем CSS стили:

a#bloggood-ru_up {
    position: fixed;
    top: 0;
    width: 10%;
    height: 100%;
    display: none;
    text-align: center;
    font: bold 12px Verdana, sans-serif;
    text-decoration: none;
    color: #45688E;
    padding-top: 10px;
    opacity: 0.7;
    filter: alpha(opacity=70);
    left: 0;
}

a#bloggood-ru_up:hover {
    color: #45688E;
    background: #E1E7ED;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

Как подключить код CSS к HTML файлу, читайте тут.

4. И напоследок: сама кнопка «Наверх» выглядит как обычная ссылка с заглушкой «#» с CSS классом:

<a id="bloggood-ru_up" href="#">&#9650; Наверх</a>

Код вставляется перед </body>

Вот абсолютно готовый код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как сделать на сайте кнопку «Наверх», как ВКонтакте на BlogGood.ru</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js "></script>
<script>
jQuery(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 50)
            jQuery('a#bloggood-ru_up').fadeIn(600);
        else
            jQuery('a#bloggood-ru_up').fadeOut(600);
    });
    jQuery('a#bloggood-ru_up').click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 0);
        return false;
    });
});
</script>
<style>
a#bloggood-ru_up {
    position: fixed;
    top: 0;
    width: 10%;
    height: 100%;
    display: none;
    text-align: center;
    font: bold 12px Verdana, sans-serif;
    text-decoration: none;
    color: #45688E;
    padding-top: 10px;
    opacity: 0.7;
    filter: alpha(opacity=70);
    left: 0;
}

a#bloggood-ru_up:hover {
    color: #45688E;
    background: #E1E7ED;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.conteiner
{
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="conteiner">
<h2>Українська мова </h2>
<h3>(Пам'яті Т. Г. Шевченка) </h3>

Діамант дорогий на дорозі лежав, — <br>
Тим великим шляхом люд усякий минав, <br>
І ніхто не пізнав діаманта того. <br>
Йшли багато людей і топтали його, <br>
Але раз тим шляхом хтось чудовний ішов,<br>
І в пилу на шляху діамант він найшов.<br>
Камінець дорогий він одразу пізнав, <br>
І додому приніс, і гарненько, як знав, <br>
Обробив, обточив дивний той камінець, <br>
І уставив його у коштовний вінець. <br>
Сталось диво тоді: камінець засіяв, <br>
І промінням ясним всіх людей здивував, <br>
І палючим огнем кольористе блищить, <br>
І проміння його усім очі сліпить. <br>
 <br><br>
Так в пилу на шляху наша мова була, <br>
І мислива рука її з пилу взяла. <br>
Полюбила її, обробила її, <br>
Положила на ню усі сили свої,<br>
І в народний вінець, як в оправу, ввела, <br>
І, як зорю ясну, вище хмар піднесла. <br>
І на злість ворогам засіяла вона, <br>
Як алмаз дорогий, як та зоря ясна. <br>
І сіятиме вік, поки сонце стоїть, <br>
І лихим ворогам буде очі сліпить. <br>
Хай же ті вороги поніміють скоріш, <br>
Наша ж мова сія щогодини ясніш! <br>
Хай коштовним добром вона буде у нас,<br>
Щоб і сам здивувавсь у могилі Тарас, <br>
Щоб, поглянувши сам на створіння своє, <br>
Він побожно сказав: «Відкіля нам сіє?!» <br><br>
(BlogGood.ru)  <br>
</div>
<a id="bloggood-ru_up" href="#">&#9650; Наверх</a>
</body>
</html>

Вот и все! Удачи вам!
Подписывайтесь на обновления моего блога BlogGood.ru!