Как сделать кнопку наверх на сайте.

Главная >> Статьи >> Страница 6 >> Как сделать кнопку наверх на сайте

Как сделать кнопку Наверх на сайте или блоге.

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

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

как сделать кнопку наверх на сайте

Кстати, если вам не понравиться вид данной кнопки или вы хотите сделать ее в виде картинки, то без проблем вы можете это сделать с помощью таблицы стилей css, правда, нужно в ней немного разбираться. Лично меня устраивает такой вариант кнопки наверх, и именно такой вариант я и буду вам рассказывать, только повторюсь, что вид самой кнопки вы можете поменять в таблице стилей. Это единственное, что вам придется менять, если нужно, а весь остальной код вы не трогаете и оставляете все как есть.

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

Первое, что вам нужно сделать, так это скачать один специальный файл на свой компьютер. Чтобы скачать данный файл перейдите по этой ссылке.

После того, как вы скачаете файл на компьютер, вам нужно данный файл закинуть на ваш хостинг в корень сайта (корень сайта - это папка на хостинге, где находятся ваш сайт).

После этого вам нужно сделать еще 2 действия, а именно вам нужно взять скопировать 2 кода и вставить их в нужное место, а какое вы сейчас узнаете.

Для начала скопируйте код под №1, который показан ниже и вставьте его себе на каждую страницу сайта или на конкретные страницы в конце страницы внутри тега <body> </body>, где вы хотите, чтобы отображалась кнопка наверх на вашем сайте. Только в данном коде вместо слова Ваш_сайт.ru измените и напишите ваш сайт. Эта строка будет говорить о том, где находится файл verx.js, который вы уже, я надеюсь, скачали себе на компьютер и закинули его на свой хостинг в корень сайта.

Код №1

<noindex><a href="#" id="toTop">Наверх</a>
<script src="http://Ваш_сайт.ru/verx.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>
</noindex>

Код №2

#toTop {
width: 100px;
background: #FFF;
border: 1px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #090;
text-decoration: none;}

Данный код вам нужно скопировать и вставить в таблицу стилей css вашего сайта в самый низ. Если у вас еще нет данного файла, то сделайте его, пригодится. Если вы не знаете, как ее сделать, то вот моя статья на тему как создать таблицу стилей css.

Кстати, последний код вы можете изменять как вам угодно и менять вид самой кнопки наверх на сайте. Это конечно относится к тем людям, кто хоть немного понимает код css. Если вы захотите, чтобы отображалась картинка вместо текста, то соответственно вам нужно сначала найти или сделать картинку и закинуть ее на хостинг к примеру, в папку с изображениями и потом изменить код css.

Все, после этого заходим на свой сайт, обновляем страницу и радуемся кнопкой наверх на вашем сайте.

Вот и подошла к концу моя статья о том, как сделать кнопку наверх на сайте. Как видите, ничего сложного я вам не дал и каждый сможет справиться с данной задачей. Оставайтесь на моем сайте подольше и приходите еще, будет интересно и полезно.

Ну как вам статья?

Наверх

Рекомендую ознакомиться с похожими статьями:

Как сделать 2 карты для сайта.

Внутренняя перелинковка сайта.

Как создать сайт в Dreamweaver.

Как увеличить посещаемость сайта с 0 до 100 человек в сутки.

Что такое seo статья и как ее написать.

Как выйти в Топ 10 поисковых систем.

Яндекс.Метрика