Кнопка «Наверх» с плавной прокруткой


Все здравствуйте! Пользуясь случаем хочу поздравить всех с наступающим новым годом.

Сегодня хочу поделиться одной темой, она довольно не новая, но актуальная «Как сделать кнопку наверх страницы на сайте«.

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

ВидеоурокДля открытия - нажмите

Необходимые данныеДля открытия - нажмите

1. Подключить jQuery.
Для этого вчасть нашего HTML документа вставим такой код:

jQuery мы подключаем из библиотеки google. Если jQuery у вас уже подключен, то, естественно, подключать его не надо.

2. Подключение своего своего js кода.
Следующим шагом подключаем .js код. Делаем это создав файл .js и подключив его в header.php вставив до

:

в созданный файл вставляем нижеприведенным кодом:

3. Пропишем CSS стили.

Теперь, в файл (style.css) добавьте стили для кнопки:

Вместо путь_до_файла/gotop.png указываем свой путь до картинки с стрелок.

Картинку со стрелкой можно взять мою или нарисовать свою собственную.

Кнопка

4. Вставляем HTML код стрелки в шаблон.
И последние надо вставить нашу кнопку в шаблон. В WordPress за конец страницы отвечает файл шаблона footer.php.

Вот и все. Так, в 4 шага можно установить кнопку «наверх».

UPDATE: Так же есть вариант кнопки как ВКонтакте — Scroll to top без плагина для WordPress


Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

18 раз(а) написали о “Кнопка «Наверх» с плавной прокруткой

  1. Очень интересная реализация этой кнопки. Имею блог на wordpress, хотел такую же кнопку сделать, но не знал как, теперь сделаю.

    Ответить
  2. Спасибо большое, очень полезный урок!

    Ответить
  3. Пытаюсь вставить кнопку на сайт DLE, отказывается работать………не поможете?!?!….

    Ответить
    • вообще данный пример рассматривался на wordpress, но кнопка работает и на любом CMS. А как я вам по могу? Я же не провидец, что бы видеть, что у вас творить на сайте.

      Ответить
  4. Отлично, у мну работает отлично. СПС 💡

    Ответить
  5. Однако где взять картинку с кнопкой «Наверх»? Гуглить?

    Ответить
    • Добавил в пост картинку. В идеале нарисовать конечно свою что бы она была уникальной.

      Ответить
  6. В видео уроке было сказано что то типа «подключаем js» при этом был вставлен скрипт которого нет в «Необходимые данные». Не все же такие специалисты что знают как делать эту операцию… Ок, переписал его в ручную, сделал все по видео уроку, обновил а там ошибка в файле хеадер, хотя вставлял все после тех же строчек что и вы.

    Придется искать другое решение либо плагин, но вас хотелось попросить показывать подробнее и по медленнее…

    Ответить
    • Подправил пост, дописав как подключить js файл.

      но вас хотелось попросить показывать подробнее и по медленнее…

      Хорошо, будет учтено

      Ответить
  7. Админ есть просьба ты не можешь расписать (лучше запостить) как сделать выдвигающую форму авторизации по нажатию на кнопку вот пример — allwow.ru в верхнем правом углу, почти на каждом шаблоне DLE тоже самое есть. Буду благодарен

    Ответить
  8. как сделать так чтоб кнопка появлялась внизу по центру? ну или как у вас на сайте

    Ответить
    • Что бы сместить стрелку надо править стили, а они у всех индивидуальные.

      Ответить
  9. теперь меняя значение right кнопка двигается по горизонтали а вот отлепить ее от верха ни как не получается менял значение top стоит на месте ставил вместо тор bottom: 0 тоже не помогает может кто подскажет как ее отлепить от верха

    Ответить
    • у всех стили разные и надо смотреть на конкретном примере.

      Попробуйте

      Ответить
  10. вы меня не так поняли в css нет координат для кнопки они есть в скрипте самого jQuery код которого я писал надо править там как то а вот как я не пойму margin-top:30px; не подходит 🙁

    Ответить
  11. Игорь, а ваша кнопочка находится на желтом члене команды ГОСТа 😉 ее практически не видно. вы бы ее в другое место поставили. В центр например классно будет!
    Я видела на паре сайтов двухсторонний лифт. Инфы как делать нигде не нашла.

    Ответить
  12. Добрый день. У меня такая ситуация… Как только подключаю jQuery, сразу вижу кривой шаблон, но кнопка появляется.
    Вылетает сам слайдер и две колонки главной, встают одна под одну.
    Убираю код подключения jQuery, шаб выравнивается. Подскажите, где искать причину.

    Ответить
    • Алексей, причина скорей всего в css стилях. Так как в примере css взяты с моего сайта и естественно они не всем подойдут.

      Ответить

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

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

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.