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

Воскресенье, 15 Мар 2015 13:47

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

Всем привет, сегодня поговорим о том, как сделать кнопку “Вверх” (Back to top) на сайте без установки специальных плагинов для WordPress, таких как WPFront Scroll Top, Smooth Scroll Up, Scroll Back To Top, jQuery Smooth Scroll и т.п.

Для чего нужна кнопка Наверх?

Ну, например, некоторые вебмастера утверждают, что это повышает юзабилити сайта, удобство и простоту использования, и даже увеличивает продажи на 10-40% smile .
Во-вторых, она пригодится сайтам, хозяева которых любят писать длинные посты-простыни, дочитав которые пользователь уже и забудет, зачем он сюда пришел *unknw* .
А некоторые любят предварительно ознакомиться с предлагаемым материалом, чтобы оценить заранее, нужно ли им вообще это читать. В этом случае, если пользователя текст статьи всё же заинтересовал, ему нужно снова вернуться вверх к началу статьи.
И чтобы долго не крутить колесико мышки, либо используя скроллинг в правой части браузера, ему достаточно нажать на кнопочку “ВВерх” и юзер как на лифту подымается вверх. Можно, конечно, в этом случае просто нажать кнопку “Home” на клавиатуре, но некоторые про такую возможность даже не знают, некоторым лень тянуться к клаве, да и вообще, кнопка “Верх” выглядит сама по себе достаточно красиво, так и призывая нажать на неё *air_kiss* .
[original:seo-semki.ru]
как сделать кнопку top

Ставим кнопку ВВЕРХ

Для того, чтобы установить кнопку самому, нам надо лишь доступ к файлам сайта по фтп, возможность их редактирования и 5 минут свободного времени.
Первое, что нам нужно, это выбрать кнопку, желательно с прозрачным фоном и в формате .png.
Я закачал на хостинг порядка 35 разных картинок, можете выбрать любую вам понравившуюся здесь, либо в другом месте.примеры кнопок вверх для сайта

 

Примеры кнопок:
1.        2.    3.      4.        5.
Есть оригинальные кнопки в виде ракеты, Винни-Пуха и так далее…

Пример одной из таких кнопок вы можете видеть на этом сайте:

пример реализации кнопки вверх на сайте

 

Второе. Создаем кнопку с использованием скрипта java script и библиотеки jQuery. Ниже приводится текст скрипта, который нужно скопировать себе и закинуть в папку на хостинге или скачать готовый.
Текст скрипта:

Скачать скрипт arrow.js – нажмите на ссылку ПКМ (правой кнопкой мыши) и выберите “Сохранить объект как…”
Путь к скрипту меняете на свой или оставляете как есть.
Третье. В футере вашей темы (footer.php) нужно вставить следующий код, перед закрывающим тегом </body>:

Внимание!
Скрипт

нужно подключать только в том случае, если у вас он не подключен ранее, иначе может быть конфликт версий jquery и плагинов! в 99% случаев, jQuery подключается средствами движка Вордпресс.
Надпись на кнопке “Вверх” можно заменить на любую другую – Вверх, в топ, TOP, To top, и т. д. За это отвечает атрибут титл .attr({title:”Наверх”}).
На этом вроде бы всё. Если что то упустил, не стесняйтесь, спрашивайте в комментариях, постараюсь помочь по мере сил и средств. *help*
[original:seо-semki.ru]
кнопка вверх png
Как вы уже поняли, существует множество способов, как установить кнопку вверх на сайте – при помощи плагинов, без плагинов, с использованием JavaScript, jQuery, а также без них, при помощи CSS и HTML. Я рассказал лишь об одном способе прокрутки страницы вверх, основанной на связке скрипта и jquery, про остальные способы возможно отпишу как-нибудь другой раз.
И напоследок традиционный анекдот (ы):

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

В магазине.
Покупатель: Это генномодифицированная морковь?
Продавец: Нет, а почему вы спрашиваете?
Морковь: Да, а почему вы спрашиваете?

И видео, не про кнопку наверх, но тоже хорошее.

    Подпишитесь на комментарии, чтобы не пропустить
    важный ответ:



подписка на rss RSS - подписка
    подписка twitter Twitter - подписка

Вы можете оставить отзыв или трекбек со своего сайта.

комментариев 15 на «Как сделать кнопку Вверх»

  1. Медведь шатун пишет:

    06 Апр 2015 в 17:51

    А про плагин scroll-to-top-jquery будет?

    [Ответить]

    seo Reply:

    Возможно.

    [Ответить]

  2. Лидочка пишет:

    09 Окт 2015 в 11:55

    Очень понравился данный способ. Поставила себе кнопочку ну не за 5 минут, ну может за 20 точно. Главное работает и всем нравится.smile Благодарю.

    [Ответить]

    seo Reply:

    Пользуйтесь на здоровье.

    [Ответить]

  3. KycTo пишет:

    06 Янв 2016 в 13:50

    Установил себе на сайт стрелку, ту где следы диких зверей.)) Советую всем, реально улучшает внешний вид блога, и поисковики говорят хорошо на них реагирую.т
    Через стили и JS не хочу, я сними не особо дружу.))

    [Ответить]

  4. irysska пишет:

    29 Сен 2016 в 08:12

    Вделала себе в бложик, кррасота))))
    Главное что кнопочек много и можно под любой фасончик цветом подобрать
    Красивых кнопок много, хочетца все сразу поставить))
    Особенно понравилась стрелка с Пухом и перо Жар-птицы

    [Ответить]

  5. Ксюша пишет:

    20 Июл 2017 в 12:48

    Спасибки, помогли smile

    [Ответить]

    seo Reply:

    Пожалуйста. *give_rose*

    [Ответить]

  6. bumer пишет:

    08 Фев 2018 в 19:53

    Дучшая реализация кнопки наверх для wordpress на мой взгляд, спасибо от пацанов!
    И за бумер отдельное списибо, моя тема!

    [Ответить]

  7. Anonboard пишет:

    01 Мар 2018 в 14:01

    Скрипт хорош,! Напоминает скрипт от Scrolltotop ;)

    [Ответить]

  8. BigBear пишет:

    06 Июн 2018 в 20:10

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

    [Ответить]

    BigBear Reply:

    …а нет появилась сам зутупа не там код прописал))

    [Ответить]

  9. Батан пишет:

    09 Июн 2018 в 18:20

    Супер, то что я искал последнее время!

    [Ответить]

  10. Клавдия пишет:

    11 Июн 2018 в 11:26

    С Винни-Пухом понрвавилось, очень креативненько поучается)))

    [Ответить]

  11. pasha31 пишет:

    04 Ноя 2018 в 06:10

    кулные кнопки, сенкс!

    [Ответить]

Ваш отзыв

https://seo-semki.ru/icons/wpml_bye.gif 
https://seo-semki.ru/icons/wpml_good.gif 
https://seo-semki.ru/icons/wpml_negative.gif 
https://seo-semki.ru/icons/wpml_scratch.gif 
https://seo-semki.ru/icons/wpml_wacko.gif 
https://seo-semki.ru/icons/wpml_yahoo.gif 
https://seo-semki.ru/icons/wpml_cool.gif 
https://seo-semki.ru/icons/wpml_heart.gif 
https://seo-semki.ru/icons/wpml_rose.gif 
https://seo-semki.ru/icons/wpml_smile.gif 
https://seo-semki.ru/icons/wpml_whistle3.gif 
https://seo-semki.ru/icons/wpml_yes.gif 
https://seo-semki.ru/icons/wpml_cry.gif 
https://seo-semki.ru/icons/wpml_mail.gif 
https://seo-semki.ru/icons/wpml_sad.gif 
https://seo-semki.ru/icons/wpml_unsure.gif 
https://seo-semki.ru/icons/wpml_wink.gif