Кнопка «наверх». Как установить ее к себе на сайт 30.11.2013

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

С какой целью необходимо устанавливать функцию кнопка наверх?

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

Кнопка наверх как ее установить на сайт?

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

  1. Откройте вкладку параметры в админке wordpress;
  2. Перейдите по Scroll to Top;
  3. И выберите любой вид кнопки, возможно загрузить свое изображение;
  4. Жмем на Update Options;
  5. Кнопка выглядит по другому.

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

  1. Вам необходимо открыть файл под названием header.php, затем перед </head> необходимо вставить код:

    <a id="toTop" href="#"><img src="http://ваш_сайт.ru/путь к картинке/картинка.png" /></a>
    <script type="text/javascript" src="http://ваш_сайт.ru/verx.js"></script><scripttype="text/javascript">// <![CDATA[
    $(function() {
    $("#toTop").scrollToTop();
    });
    // ]]></script>

    Этот код надо немного отредактировать. Место ваш_сайт.ru — укажите название сайта, путь к картинке — необходимо указать путь, картинка — указать название.
  2. Открыть файл style.css и вставить код:

    #toTop {
    width: 100px;
    text-align: center;
    padding: 5px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    color: #666666;
    text-decoration: none;}

    стили конечно можно поправить по своему вкусу.
  3. Файл verx.js необходимо скачать, распаковать его из архива и закинуть в корневой каталог сайта.
  4. Файл functions.php открыть и вкинуть данный код перед этим символом — ?>:

    // smart jquery inclusion
    if (!is_admin ()) {
    wp_deregister_script ('jquery');
    wp_register_script ('jquery', («http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»), false);
    wp_enqueue_script ('jquery');
    }

Все готово, теперь у вас есть эта функция. Спасибо что уделили внимание данной статье.

 До встречи на  Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

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

ВКонтакте