Как сделать на сайте наверх


Как сделать на сайте наверх

Как сделать на сайте наверх

Как сделать на сайте наверх


Лучшие новости сайта

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

[]

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

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

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

1. Для начала :

<script type="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!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: ,


Источник: http://bloggood.ru/vebmasteru/kak-sdelat-na-sajte-knopku-naverx-kak-vkontakte.html/


Как сделать на сайте наверх фото


Как сделать на сайте наверх

Как сделать на сайте наверх

Как сделать на сайте наверх

Как сделать на сайте наверх

Как сделать на сайте наверх

Как сделать на сайте наверх

Как сделать на сайте наверх

Читать топ новости: