Самая простая кнопка наверх для сайта. Кнопка наверх для сайта


Кнопка "Наверх" для сайта на jQuery

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

Простейшую кнопку можно сделать, используя только HTML, путем установки якоря. Такой способ я даже не стал рассматривать, так как, по-моему, смотрится это не очень. Ведь так? Я хотел, чтобы переход осуществлялся плавно, а не скачком. К тому же, мне хотелось не просто кнопку, а целую полосу (блок), находящийся с одной стороны страницы и занимающий всю ее высоту.

Потратив достаточно времени на поиски желаемого, я все-таки смог найти ту самую, которая удовлетворяла всем моим требованиям. Нашел я ее на сайте truemisha.ru, описание которой было вот в этой статье. Оценить эту кнопку можно на этой странице.  А сейчас я предлагаю рассмотреть о том, как она устанавливается.

Установка кнопки

Первым делом необходимо скачать архив с исходниками. В архиве находится три файла:

  1. top-button-jquery.html — пример страницы с кнопкой
  2. layout.css — файл со стилями
  3. button.js — файл с функциями для работы кнопки

P.S. Лично я содержимое файла layout.css не использовал. Все, что там было написано, я удалил и прописал свои стили.

Затем вставляем следующий HTML код перед закрывающимся тегом </body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="button.js"></script> <div> <a href="#top">наверх</a> </div>

Обращаю внимание, что нужно указать правильный путь к файлу button.js в строке

<script src="button.js"></script>

Если не получается указать правильный путь, и Ваш сайт стоит на WordPress, можно облегчить себе задачу, поместив button.js в папку с текущей темой и вызвав функцию получения директории.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri() ?>/button.js"></script> <div> <a href="#top">наверх</a> </div>

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

Исходный css код

#top-link{ cursor:pointer; /* изменяем указатель мыши при наведении на блок */ display:none; /* скрываем блок с кнопкой, т.к. отображать надо только при прокрутке */ position:fixed; /* фиксируем расположение */ left:0px; top:0px; padding:0; } #top-link a{ display:block; }

Мой css код

#top-link { cursor: pointer; display: none; position: fixed; left: 0px; top: 0px; padding: 0; z-index: 1; } #top-link:hover { background: #ccc; opacity: 0.5; } #top-link a { display: block; width: 100px; background: url(./UpArrow.png) no-repeat 50% 50%; /*Стрелка, расположенная по центру*/ padding: 5px 0; margin: 5px; margin-top: 10px; text-decoration: none !important; opacity: 0.5; } #top-link:hover a { opacity: 1; }

Если Вы все сделали правильно, можете наслаждаться результатом, если же что-нибудь не получается, можете задать вопрос в комментариях под этой статьей или же здесь. А на этом все. Удачи Вам!

mvblog.ru

Самая простая кнопка наверх для сайта

Как установить кнопку наверх для сайта, самый простой способ. Как то раз я озадачился этим вопросом. Мне нужна была кнопка вверх, но только без плагина и кучи скриптов, я искал какой нибудь простой код на HTML, который вы можете скачать чуть ниже. Кнопка вверх для сайта, функция очень полезная, если вы хренов копирайтер, и любите писать тонны контента, которые мало кто любит читать, тогда кнопка вверх, будет очень кстати. Вообще, как я заметил, запрос по данной кнопке, очень актуальный. Но вообще, функцию кнопки вверх, выполняет обычная клавиатура, это клавиша Page Up, так я вам больше скажу, клавиша на клавиатуре Page Down, как вы догадались, отвечает за функцию, прокрутки вниз, или просто, кнопка вниз для сайта☺.

Как сделать исчезающую кнопку наверх для сайта

Ну здесь вообще, легче не придумаешь, и даже качать ничего не надо. Для этого вам нужно открыть какой нибудь пост на этом сайте, любой, какой хотите, затем нажать в пустом месте, правой кнопкой мыши, и выбрать "Просмотр кода страницы", потом промотать до самого низа, или нажать клавиши Ctrl+F и в поле поиска, ввести <!--Smooth Back to Top Button Start-->.

Копируете до значения <!--Smooth Back to Top Button End-->

То есть так, я пометил, где у меня начало кода кнопки и конец кода кнопки, ничего сложно, в блогспоте, этот код вставляется до тега </body>, если это WP, то там по моему это можно воткнуть куда угодно.

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

Вот такая коротенькая статья, про волшебную кнопку наверх для сайта, код качайте ЗДЕСЬ. Не забывайте рассказывать про сайт другалям и корешам. Заходите на страницу ПРОГРАММЫ и качайте нужный софт, на этот блог, я буду стараться заливать что нибудь интересное.        

ЗАХОДИТЕ НА БАЗАР

spam-club.blogspot.com

Как сделать кнопку «наверх» для сайта или блога? Установить кнопку наверх на сайт.

Здравствуйте, уважаемые читатели моего «сайто-блога», подписчики, друзья и все те, кто зашёл ко мне в поисках информации! Сегодня я расскажу, как сделать кнопку  «наверх» для сайта или блога. Как установить кнопку «наверх» на любой сайт? Кнопка «наверх» для Wordpress.

Думаю, всем понятна суть этой кнопочки. Читая длинный, интересный пост на вашем сайте, посетитель доходит до конца странички, и, чтобы ему потом долго-долго не крутить колёсико мышки, он нажимает на кнопку «наверх» и мгновенно оказывается в начале страницы, где главное меню в его распоряжении.

Вот и я загорелся идеей поставить на сайт кнопку «наверх». Немного посидев в интернете, нашёл много информации по установки кнопки «наверх» на блог Wordpress, но у меня-то сайт самописанный… Пришлось самому и писать скрипт кнопки «наверх» для сайта! В итоге, мой скрипт отлично подходит для установки на любой сайт или блог!

Устанавливаем кнопку «наверх» на сайт:

В конце этой статьи скачайте архив с двумя файлами: готовой html-страничкой и картинкой (стрелочка «наверх»). Вы можете открыть html-страничку в любом браузере и посмотреть работу кнопки «наверх».

1. Работу начнём с javascript кода:

ВНИМАНИЕ! Для работы скрипта требуется подключить библиотеку jquery, перед js-кодом. Если  она  у вас уже подключена, то вставьте этот код в главный файл вашего сайта между тегами head. Обычно, главный файл это index.html, index.php. Для блога Wordpress рекомендую вставить в файл header.php шаблона вашего сайта. Если у вас простой статичный html-сайт, то вставить нужно будет на каждую страницу.

2. Добавляем кнопке «наверх» стили, css-код:

/* knopka na verh -----------------------------------------------------------*/ #back-top { position: fixed; bottom: 0px; right: 15px; z-index:999; } #back-top a { width: 100px; display: block; text-align: left; font: 14px/100% Verdana; text-decoration: none; color: #fff; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #fff; } /* arrow icon (span tag) */ #back-top span { width: 100px; height: 30px; display: block; margin-bottom: 7px; line-height:30px; background: #777 url(up-arrow.png) no-repeat center center; opacity:0.7; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #777; opacity:1; }

Вставьте этот css-код  в таблицу стилей style.css вашего сайта, либо шаблона вашего сайта. Для блогов, сделанных на wordpress этот файл находится в папке с темой (wp-content/themes/ваша_тема/style.css).

3. Добавляем html-код кнопки «наверх»:

Поместите его в основном шаблоне вашего сайта, перед закрывающим тегом body. Для Wordpress-блогов рекомендую его вставить в файл footer.php в тело. Если у вас простой html-сайт, то вставьте его в каждую страничку.

4. В архиве есть картинка (стрелочка «наверх»), закиньте её в корень своего сайта. Если, кто не знает, это основная папка, в которой находятся все файлы вашего сайта. Обычно она называется httpdocs или public_html.

Вот и всё! Обновите страничку, своего сайта или блога, в правом нижнем углу должна появиться кнопка «наверх» при прокрутке колёсика мышки вниз. Вы можете изменить дизайн кнопки, пофантазировав со стилями css, поменять картинку на свою и т.д.

Теперь и вы знаете, как сделать кнопку «наверх» для сайта и блога, как установить кнопку «наверх» на любой сайт. Если у вас появились вопросы, задавайте в комментариях. Постараюсь ответить на все!

Сегодня в рубрику «Мотивация – путь к успеху» я помещаю такую картинку:

Как вам статья? Надеюсь, была интересна тема: «как сделать кнопку «наверх» для сайта и блога» и статья была полезной. Не забудьте подписаться на обновление моего сайта по e-mail, чтобы не пропустить выход новых интересных постов и участвовать в классном конкурсе. Всем пока! Пока!

На этом всё. С уважением, Павел Макаров.P.S. Буду рад комментариям к этому посту.

pavelmakarov.ru