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

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

кнопка на сайт наверх
Вчера получила заявку: написать статью о том, как установить на сайт кнопку “Наверх”.


Признаюсь честно, никогда не видела необходимости в такой кнопке, так как активно пользуюсь “горячими клавишами”:

Ctrl+Home – перейти на самый верх страницы

Ctrl+End – перейти на самый низ страницы.

Эти сочетания клавиш работают в Word, Excel и других программах, а также в любом браузере и на любом сайте.

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

Прежде чем писать статью, я набрала такой поисковый запрос в Google. Естественно, нашла там немало информации по этому поводу. На два сайта зашла, на одном даже комментарий написала (относительно “горячих клавиш”Улыбка). Но решила попробовать поставить кнопку Наверх для сайта самостоятельно и не используя плагины.

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

Первое, что делаем: находим подходящую кнопку в интернете или создаем ее сами. Я стрелку нарисовала в Paint по шаблону. В Photoshop сделала эту стрелку объемной и добавила к ней текст. Результат своего художества сохранила с прозрачным фоном и загрузила на хостинг в ту же папку images, куда загружала и логотип (Я не буду в этой статье описывать все шаги уж слишком подробно, так как все описала в статье “об установке логотипа”. Те элементы, которые будут отличаться, конечно же, поясню.)

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

Второе:  решаем, в какое место на сайте ставим эту кнопку. Я решила поставить стрелку так, чтобы она в любой момент была видна внизу-слева. Многие ставят её в самый низ сайта – ну, тут кому как нравится.

Третье: обдумываем метод решения. Можно использовать скрипты, а можно просто поставить ссылку якорь.

Естественно, я пошла самым простым путем, используя ссылку якорь.

  1. Установка кнопки Наверх.
    Вставила в файл footer.php (вспомните, как правильно редактировать файлы сайта) после тега
    <div id=”footer”> такой код:

    Здесь:

    position:fixed; – означает фиксированное положение кнопки независимо от прокручивания содержимого сайта;
    left:0; – означает, что кнопка стоит в крайнем левом положении окна браузера;
    bottom:0; – означает, что кнопка стоит в крайнем нижнем положении от окна браузера.установка ссылки якоря
    Если стили style=”position:fixed; left:0; bottom:0;”  убрать совсем, то стрелка установится в самом низу сайта по центру. Если вместо position:fixed; left:0; bottom:0; написать margin-left:900px; , то стрелка сдвинется к правому краю сайта (вместо 900 Вам нужно будет подобрать такое значение, чтобы стрелка встала туда, куда Вы хотите).

  2. Установка ссылки-якоря.Поскольку вернуться надо на самый верх, то идем в файл, за него и отвечающий, то есть опять в header.php. Я поставила якорь в название блога. Выглядит он так: id=”up”, а вставляется в тег <h1>.Кнопка наверх на сайте

Обновляем сайт и видим результаты работы.

По такому же принципу можно установить кнопку “Вниз”, если человек хочет прочитать комментарии, не читая статьи (например, статью он уже читал и теперь просто отслеживает новые комментарии).

Прошу Вас написать в комментариях, где же все-таки лучше поставить кнопку “Наверх”? Может быть, я не права, и она, действительно, должна находиться в самом низу сайта?

Итак, в этой статье я рассмотрела вопрос, как установить на сайт кнопку “Наверх”.

TEXT.RU - 100.00%

А в завершение, как обычно, видеоролик про любимых кошек:

 

Это тоже интересно:

Комментарии

  • Ну, Нинусь, вот видно, что обучение у Маторы и работа на Одеске не пошли даром.
    Я вот сегодня тоже решила начать полноценно осваивать фотошоп, а не урывками. А там может и до скриптом дойду. А может и нет. Что-то сложноваты они для меня))
    Радуюсь прямо и посещениям твоим на блоге. МОлодчинка!

    • Нина пишет:

      Обучение любое не проходит даром. Но у меня сейчас все получается урывками. Так что, если успеваю написать статью, это уже почти подвиг :)

  • Вера пишет:

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

    • Нина пишет:

      Да, Вера, Вы правы! Ориентироваться надо не на себя, а на наших читателей. А они все разные, с разными знаниями и навыками.

  • Дмитрий пишет:

    класс! У меня стоит плагин, но валидатор ругается на него, говорит – ошибки. А это выход – и плагин не нужен, нагрузка на хост снизится, и кнопочка есть. Хотел сам, но теперь воспользуюсь вашим способом (скрипт тоже писать неохота, точнее, разбираться)

    • Нина пишет:

      Отлично, Дмитрий, что выход всегда находится. Мне тоже не захотелось разбираться с скриптами, тем более, что этот способ “лежит” на поверхности.

  • Владислав пишет:

    Отличное решение для тех, у кого нет еще этой кнопки.

  • Татьяна пишет:

    Здравствуйте, Уважаемая, Нина!

    Давно хочу поставить себе на сайт такие кнопки, но ничего не могла понять,как сделать. Попробую ещё раз.

    Много полезного на Вашем сайте. Мне понравилось. Спасибо Вам! С ВЕСНОЙ, Вас!

    • Нина пишет:

      Спасибо, Татьяна, рада, что Вам понравилось на моем блоге. Думаю, что кнопку поставите, по моему методу все очень просто. Если будут вопросы, задавайте, я обязательно отвечаю на все вопросы.
      С наступающим Женским днем Вас! Счастья, успехов, любви!

  • Нина, очень полезная статья. Спасибо!

  • Тоже задумывался о том, чтобы поставить кнопку “наверх”, и искал плагин, который “проявлял” бы кнопку только при прокрутке страницы вниз. А тут на вашу смотрю – вполне прилично получилось! Правда саму кнопку я бы все же поменял на более красивую

    • Нина пишет:

      :) Как сумела, так и нарисовала :) Можно, конечно поискать кнопку покрасивее, но это уже будет чужая, а не моя – родная.

    • Володя пишет:

      Могу посоветовать плагин: scrollto-top, прост в настройке и кнопку можно поставить любую, в том числе и свою.

      • Нина пишет:

        Спасибо, но Вы, видимо, не поняли: я хочу обходиться минимумом плагинов. В этом и ценность описанного метода, что не нужны плагины

  • Ирина. пишет:

    Действительно, очень простой способ. И что самое важное, не нужно “грузить” сайт плагинами! Спасибо вам. Моё мнение насчет кнопочки, думаю было бы неплохо, если бы она немножко отступала от края экрана, пикселей на 10-20. Если так сделать возможно. А то при просмотре в моем браузере, она немного заходит за край экрана. Я хотела у вас спросить, моему блогу только месяц, и я ещё не нашла подходящей темы для WordPress. Сколько не смотрела, все не нравятся, узкие какие-то, а у вас замечательная тема! Широкая, красивая! Это у вас бесплатная тема, или вы её покупали? И если платная, то сколько стоит такая тема. Если не трудно, скажите мне. Я буду ждать ответа, с уважением, Ирина.

  • Нина пишет:

    Ирина, спасибо за такой хороший и развернутый комментарий.
    Насчет расположения кнопки – немного подвинула: поставила left:10px; bottom:20px; и так даже лучше смотрится. Саму кнопку я со временем заменю, может быть, а расположение так и оставлю.
    Тема у меня бесплатная, называется F2. И вроде бы я ее через админ панель находила.
    Успехов Вам, заходите еще :)

  • Ярослав пишет:

    Нина, спасибо за описание стрелки, тем более без плагина.
    Но, если честно, не вижу в ней необходимости. Она, считаю, нужна только для абсолютных лузеров (только они страх как не любят признаваться в этом – даже сами себе). На клавиатуре есть чудесные клавиши Home и End, специально предназначенные для перехода в начало и в конец документа соответственно (кстати, прекрасно работают и без Ctrl – проверял в Опере, Хроме, Мозилле, Яндексе). Молчу уж о Page Down и Page Up – прекрасных помощниках в деле прокрутки экрана.
    Для тех, кто решил обидеться насчет лузеров… Обижайтесь на здоровье! Но помните – умение работать с клавиатурой является одним из признаков профессионализма, и это придумано отнюдь не мной.

    • Нина пишет:

      Ярослав, я с Вами согласна, о чем и писала в статье. Я не пользуюсь этими кнопками, привыкла к “горячим” клавишам. Насчет Home и End – знаю, что и без Ctrl работают, но у меня уже автоматизм срабатывает, т.к. это сочетание используется во многих приложениях: и в Word, и в Ecxel, и даже в Блокноте… А у меня всю жизнь работа была связана с компьютерами, вот и привыкла :)

  • Сергей пишет:

    Здравствуйте, Нина! Если не возражаете, то я бы рекомендовал использовать все же скрипт, хотя бы для того чтобы не искажался URL.

  • Сергей пишет:

    Когда нажимаешь на простую кнопку, то в URL страницы появляется #, чтобы ее не было я обычно ставлю скрипт. Сегодня постараюсь выложить в своей шпаргалке (http :// blogdeda.ru/blogodelka/), в крайнем случае завтра, если сегодня не успею. Там нет ничего сложного – один маленький скрипт, картинка и код в футере, и никаких решеток в урле и прокрутка работает плавно.

    • Да меня совсем не напрягает решетка, а также мне все равно: плавно прокручивается или нет. Я сама вообще не пользуюсь этими кнопками. У меня есть две: Home – наверх, End – вниз :)
      Но, может, Вы правы и кому-то это не нравится, как знать…

  • Александр пишет:

    Очень подробно, спасибо, ни разу не встречал таких пояснений, даже захотелось самому во всем разобраться

  • Елена пишет:

    Кнопка “вверх” одно время было для меня предметом вожделения! Искала статьи на эту тему, пробовала ставить эту кнопку разными способами – ну ничего не получалось. Может руки кривы, может тема сопротивлялась и когда я совсем уже распрощалась со своей мечтой, мне на глаза попался дельный совет.
    Нина, надеюсь не будешь на меня ругаться и коммент мой увидят такие же “невезучие” как я. Это я с ними поделюсь советом. У каждого из нас в руках наша любимая мышка с колёсиком посередине. Нажмите это волшебное колёсико и увидите, появившуюся на экране монитора “мишень”, управляйте ею как вам захочется и будет сайтик ездить вверх-вниз с любой скоростью, какую вы ему зададите!

    • А если это колесико просто крутить, тоже можно двигать сайт с любой скоростью. Да и кнопки эти “вверх-вниз” не слишком-то нужны, если знать две “волшебные” клавиши: Home-вверх и End-вниз, как я и написала в своей статье :)

  • Iryna пишет:

    Я себе тоже давно установила кнопку “Вверх”. И тоже скриптом. Но делала это не сознательно, а просто скопировала на каком-то сайте и вставила код. Стрелка у меня на блоге мне не очень нравится.Теперь по свободе можно будет поискать красивую стрелочку и вставить ее по этим пояснениям. Все очень понятно. Спасибо, Нина!.

  • Галина пишет:

    Спасибо за статью. О кнопке Наверх пока не задумывалась. А за подсказку горячих клавиш отдельная благодарность!

  • Я одно время. намучилась с этой кнопкой, пока ее установила. но я по-моему, ставила плагином. а вот про горячие клавиши тоже только узнала. просто век живи-век учись. Спасибо, Нина. У вас, смотрю, нет на сайте этой кнопки.

  • Я считаю, лучше задавать позицию кнопки не в % от левого края окна, а в px от правого края, хотя конечно всё зависит от конкретной задачи.

  • Нина, спасибо, поставила. Единственный минус, что подъём не плавный, а мгновенный. Но я пробовала поставить с помощью кода, но, видимо, скрип конфликтует, поэтому результат такой же :)

Ответить на Александр Отмена ответа

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">