Кнопка “Наверх” для сайта
Вчера получила заявку: написать статью о том, как установить на сайт кнопку “Наверх”.
Признаюсь честно, никогда не видела необходимости в такой кнопке, так как активно пользуюсь “горячими клавишами”:
Ctrl+Home – перейти на самый верх страницы
Ctrl+End – перейти на самый низ страницы.
Эти сочетания клавиш работают в Word, Excel и других программах, а также в любом браузере и на любом сайте.
Но прекрасно понимаю, что не все знают эти замечательные клавиши, а ориентироваться надо не на себя, а на своих читателей. Поэтому решила написание статьи совместить с установкой такой кнопки на свой блог.
Прежде чем писать статью, я набрала такой поисковый запрос в Google. Естественно, нашла там немало информации по этому поводу. На два сайта зашла, на одном даже комментарий написала (относительно “горячих клавиш”
). Но решила попробовать поставить кнопку Наверх для сайта самостоятельно и не используя плагины.
Как сделать кнопку Наверх
Первое, что делаем: находим подходящую кнопку в интернете или создаем ее сами. Я стрелку нарисовала в Paint по шаблону. В Photoshop сделала эту стрелку объемной и добавила к ней текст. Результат своего художества сохранила с прозрачным фоном и загрузила на хостинг в ту же папку images, куда загружала и логотип (Я не буду в этой статье описывать все шаги уж слишком подробно, так как все описала в статье “об установке логотипа”. Те элементы, которые будут отличаться, конечно же, поясню.)
Как установить кнопку Наверх
Второе: решаем, в какое место на сайте ставим эту кнопку. Я решила поставить стрелку так, чтобы она в любой момент была видна внизу-слева. Многие ставят её в самый низ сайта – ну, тут кому как нравится.
Третье: обдумываем метод решения. Можно использовать скрипты, а можно просто поставить ссылку якорь.
Естественно, я пошла самым простым путем, используя ссылку якорь.
- Установка кнопки Наверх.
Вставила в файл footer.php (вспомните, как правильно редактировать файлы сайта) после тега
<div id=”footer”> такой код:
1<a href="#up"><img src="Адрес папки с картинкой/up.png" style="position:fixed; left:0; bottom:0;" title="Вернуться наверх" alt="Кнопка Наверх"></a>
Здесь:position:fixed; – означает фиксированное положение кнопки независимо от прокручивания содержимого сайта;
left:0; – означает, что кнопка стоит в крайнем левом положении окна браузера;
bottom:0; – означает, что кнопка стоит в крайнем нижнем положении от окна браузера.
Если стили style=”position:fixed; left:0; bottom:0;” убрать совсем, то стрелка установится в самом низу сайта по центру. Если вместо position:fixed; left:0; bottom:0; написать margin-left:900px; , то стрелка сдвинется к правому краю сайта (вместо 900 Вам нужно будет подобрать такое значение, чтобы стрелка встала туда, куда Вы хотите). - Установка ссылки-якоря.Поскольку вернуться надо на самый верх, то идем в файл, за него и отвечающий, то есть опять в header.php. Я поставила якорь в название блога. Выглядит он так: id=”up”, а вставляется в тег <h1>.
Обновляем сайт и видим результаты работы.
По такому же принципу можно установить кнопку “Вниз”, если человек хочет прочитать комментарии, не читая статьи (например, статью он уже читал и теперь просто отслеживает новые комментарии).
Прошу Вас написать в комментариях, где же все-таки лучше поставить кнопку “Наверх”? Может быть, я не права, и она, действительно, должна находиться в самом низу сайта?
Итак, в этой статье я рассмотрела вопрос, как установить на сайт кнопку “Наверх”.
А в завершение, как обычно, видеоролик про любимых кошек:
Комментарии
Ну, Нинусь, вот видно, что обучение у Маторы и работа на Одеске не пошли даром.
Я вот сегодня тоже решила начать полноценно осваивать фотошоп, а не урывками. А там может и до скриптом дойду. А может и нет. Что-то сложноваты они для меня))
Радуюсь прямо и посещениям твоим на блоге. МОлодчинка!
Обучение любое не проходит даром. Но у меня сейчас все получается урывками. Так что, если успеваю написать статью, это уже почти подвиг
Нина,благодарю за пост.Я тоже пользуюсь горячими клавишами,но хочу установить такую кнопку для своих читателей. Предполагаю,что моя ЦА с техническими нюансами возможно не знакома.Дальнейших успехов.
Да, Вера, Вы правы! Ориентироваться надо не на себя, а на наших читателей. А они все разные, с разными знаниями и навыками.
класс! У меня стоит плагин, но валидатор ругается на него, говорит – ошибки. А это выход – и плагин не нужен, нагрузка на хост снизится, и кнопочка есть. Хотел сам, но теперь воспользуюсь вашим способом (скрипт тоже писать неохота, точнее, разбираться)
Отлично, Дмитрий, что выход всегда находится. Мне тоже не захотелось разбираться с скриптами, тем более, что этот способ “лежит” на поверхности.
Отличное решение для тех, у кого нет еще этой кнопки.
Я тоже так думаю, Владислав! Спасибо и успехов Вам!
Здравствуйте, Уважаемая, Нина!
Давно хочу поставить себе на сайт такие кнопки, но ничего не могла понять,как сделать. Попробую ещё раз.
Много полезного на Вашем сайте. Мне понравилось. Спасибо Вам! С ВЕСНОЙ, Вас!
Спасибо, Татьяна, рада, что Вам понравилось на моем блоге. Думаю, что кнопку поставите, по моему методу все очень просто. Если будут вопросы, задавайте, я обязательно отвечаю на все вопросы.
С наступающим Женским днем Вас! Счастья, успехов, любви!
спасибо, понятно, доходчиво и без – viebonov.- так держать.
Спасибо, стараюсь без этих самых…
Нина, очень полезная статья. Спасибо!
Спасибо за отзыв, Андрей! Надеюсь, что создаю полезный блог.
Тоже задумывался о том, чтобы поставить кнопку “наверх”, и искал плагин, который “проявлял” бы кнопку только при прокрутке страницы вниз. А тут на вашу смотрю – вполне прилично получилось! Правда саму кнопку я бы все же поменял на более красивую
Могу посоветовать плагин: scrollto-top, прост в настройке и кнопку можно поставить любую, в том числе и свою.
Спасибо, но Вы, видимо, не поняли: я хочу обходиться минимумом плагинов. В этом и ценность описанного метода, что не нужны плагины
Действительно, очень простой способ. И что самое важное, не нужно “грузить” сайт плагинами! Спасибо вам. Моё мнение насчет кнопочки, думаю было бы неплохо, если бы она немножко отступала от края экрана, пикселей на 10-20. Если так сделать возможно. А то при просмотре в моем браузере, она немного заходит за край экрана. Я хотела у вас спросить, моему блогу только месяц, и я ещё не нашла подходящей темы для WordPress. Сколько не смотрела, все не нравятся, узкие какие-то, а у вас замечательная тема! Широкая, красивая! Это у вас бесплатная тема, или вы её покупали? И если платная, то сколько стоит такая тема. Если не трудно, скажите мне. Я буду ждать ответа, с уважением, Ирина.
Еще, Ирина, хочу добавить. Возможно, Вам понравится тема на другом блоге. Так вот, какая тема (шаблон) там стоит, Вы легко узнаете, прочитав вот эту мою статью: /kak-uznat-kakoj-shablon-stoit-na-sajte.html
Ирина, спасибо за такой хороший и развернутый комментарий.
Насчет расположения кнопки – немного подвинула: поставила left:10px; bottom:20px; и так даже лучше смотрится. Саму кнопку я со временем заменю, может быть, а расположение так и оставлю.
Тема у меня бесплатная, называется F2. И вроде бы я ее через админ панель находила.
Успехов Вам, заходите еще
Нина, спасибо за описание стрелки, тем более без плагина.
Но, если честно, не вижу в ней необходимости. Она, считаю, нужна только для абсолютных лузеров (только они страх как не любят признаваться в этом – даже сами себе). На клавиатуре есть чудесные клавиши Home и End, специально предназначенные для перехода в начало и в конец документа соответственно (кстати, прекрасно работают и без Ctrl – проверял в Опере, Хроме, Мозилле, Яндексе). Молчу уж о Page Down и Page Up – прекрасных помощниках в деле прокрутки экрана.
Для тех, кто решил обидеться насчет лузеров… Обижайтесь на здоровье! Но помните – умение работать с клавиатурой является одним из признаков профессионализма, и это придумано отнюдь не мной.
Ярослав, я с Вами согласна, о чем и писала в статье. Я не пользуюсь этими кнопками, привыкла к “горячим” клавишам. Насчет Home и End – знаю, что и без Ctrl работают, но у меня уже автоматизм срабатывает, т.к. это сочетание используется во многих приложениях: и в Word, и в Ecxel, и даже в Блокноте… А у меня всю жизнь работа была связана с компьютерами, вот и привыкла
Здравствуйте, Нина! Если не возражаете, то я бы рекомендовал использовать все же скрипт, хотя бы для того чтобы не искажался URL.
Не поняла, Сергей, чтобы не искажался какой URL?
Когда нажимаешь на простую кнопку, то в URL страницы появляется #, чтобы ее не было я обычно ставлю скрипт. Сегодня постараюсь выложить в своей шпаргалке (http :// blogdeda.ru/blogodelka/), в крайнем случае завтра, если сегодня не успею. Там нет ничего сложного – один маленький скрипт, картинка и код в футере, и никаких решеток в урле и прокрутка работает плавно.
Да меня совсем не напрягает решетка, а также мне все равно: плавно прокручивается или нет. Я сама вообще не пользуюсь этими кнопками. У меня есть две: Home – наверх, End – вниз
Но, может, Вы правы и кому-то это не нравится, как знать…
Очень подробно, спасибо, ни разу не встречал таких пояснений, даже захотелось самому во всем разобраться
А чего тут особо разбираться? Все написано
Кнопка “вверх” одно время было для меня предметом вожделения! Искала статьи на эту тему, пробовала ставить эту кнопку разными способами – ну ничего не получалось. Может руки кривы, может тема сопротивлялась и когда я совсем уже распрощалась со своей мечтой, мне на глаза попался дельный совет.
Нина, надеюсь не будешь на меня ругаться и коммент мой увидят такие же “невезучие” как я. Это я с ними поделюсь советом. У каждого из нас в руках наша любимая мышка с колёсиком посередине. Нажмите это волшебное колёсико и увидите, появившуюся на экране монитора “мишень”, управляйте ею как вам захочется и будет сайтик ездить вверх-вниз с любой скоростью, какую вы ему зададите!
А если это колесико просто крутить, тоже можно двигать сайт с любой скоростью. Да и кнопки эти “вверх-вниз” не слишком-то нужны, если знать две “волшебные” клавиши: Home-вверх и End-вниз, как я и написала в своей статье
Я себе тоже давно установила кнопку “Вверх”. И тоже скриптом. Но делала это не сознательно, а просто скопировала на каком-то сайте и вставила код. Стрелка у меня на блоге мне не очень нравится.Теперь по свободе можно будет поискать красивую стрелочку и вставить ее по этим пояснениям. Все очень понятно. Спасибо, Нина!.
Спасибо за статью. О кнопке Наверх пока не задумывалась. А за подсказку горячих клавиш отдельная благодарность!
Я одно время. намучилась с этой кнопкой, пока ее установила. но я по-моему, ставила плагином. а вот про горячие клавиши тоже только узнала. просто век живи-век учись. Спасибо, Нина. У вас, смотрю, нет на сайте этой кнопки.
Да, Оля, я не так давно поменяла шаблон и еще не все восстановила. Руки не дошли. Кстати, что нет этой кнопки, я и забыла, спасибо за напоминание
Я считаю, лучше задавать позицию кнопки не в % от левого края окна, а в px от правого края, хотя конечно всё зависит от конкретной задачи.
Процентов у меня и нет, а насчет пикселей – можно задавать от любого края, только правильно это прописать.
Нина, главное конечный результат, а как он достигнут это индивидуальное дело.
Конечно. Вот я писала в статье, что поставила кнопку в левый угол, а после смены шаблона решила, что справа ей будет лучше. Так что, позиция кнопки – это дело автора блога, а мне главное – показать, что надо делать.
Все верно, Вы дали своим почитателям информацию и право выбора, за Ваш труд отдельное спасибо, – а как ней воспользоваться все зависит человека и его фантазии который решил нею воспользоватся
Нина, спасибо, поставила. Единственный минус, что подъём не плавный, а мгновенный. Но я пробовала поставить с помощью кода, но, видимо, скрип конфликтует, поэтому результат такой же
Я в этом минуса не вижу. Наоборот, чем быстрее, тем лучше