Кнопка возврата в начало страницы!

Привет друзья! Как Ваше настроение? На связи с Вами Лобанов Кирилл.

Давайте сегодня поговорим об одной очень интересной вещице, которая делает удобнее блог для пользователей. Это скрипт, который вступает в свою работу, когда пользователь читая статью проматывает страницу ниже середины. Называется по английски этот скрипт Scroll To Top, ну а по русски говоря Возврат в начало страницы. Данный скрипт универсальный и подходит для любой CMS, но мы будем рассматривать на примере моей любимой MaxSite CMS!

Шаг №1 — Подготовка

Сначала подключаемся к хостингу, через файловый менеджер, например FileZilla.

Следующий шаг, открываем папку с шаблоном сайта на MaxSite CMS — путь примерно получится такой

/application/maxsite/templates/ПАПКА ШАБЛОНА/stock — вот именно в этой папке stock и будем производить все манипуляции!

Теперь пожалуйста будьте внимательны, чтобы у Вас все получилось с первого раза.

В папке stock создаем еще одну папочку, с названием scroll-to-top

После этого в папке scroll-to-top создаем папку с названием images в этой папке будет храниться стрелочка, которая будет указывать Вверх.

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

Давайте приступим к этому этапу.

Шаг №2 — Пишем код

Сейчас нужно открыть редактор кода Notepad++, либо любой другой удобный для Вас редактор, кроме «Блокнот».

Создаем в редакторе новый файл и называем его scroll-to-top.php — обратите внимание, чтобы Ваше название, было точь в точь таким же! Лучше всего скопируйте его отсюда! И сохраните этот файл в папку scroll-to-top

В результате у Вас на хостинге должен быть примерно такой путь до файла:

Дальше будем писать код в открытом файле scroll-to-top.php

В самом начале файла прописываем вот такую конструкцию:

Далее пишем HTML-код для стрелки, чтобы MaxSite CMS понимал, где ее нужно расположить.

На следующей строке в файле scroll-to-top.php прописываем вот такую конструкцию:

Дальше нужно прописать код, для анимации и плавного возврата в начало страницы.

Прописываем вот этот код:

После этого нужно сохранить файл.

Шаг №3 — Украшаем

Теперь совершаем самый последний шаг, это нужно найти картинку стрелки вверх размером 32×32 и обязательно PNG.

Нажмите здесь, чтобы перейти на сайт, где я нашел для Вас широкий выбор стрелок.

Теперь сохраняете выбранную стрелку с именем scroll-to-top17.png себе на компьютер.

Дальше загружаете на хостинг по адресу

На всякий случай прикладываю исходные файлы, скачать их можно здесь!

Оставляйте Ваши комментарии и нажимайте кнопки соц.сетей!

Кнопка возврата на верх страницы java и jquery

  • 2019-01-13
    • 28
    • Марта
      2014

Доброго времени суток!
Сегодня я предоставлю вашему вниманию скрипт, который поможет организовать вам возврат на верх страницы. Данный скрипт можно использовать везде. Я использую его на своем сайте, который работает на WordPress. То есть если вы как и я отдаете предпочтение коду, а не плагину, то эта статья для Вас 🙂
И так приступим.

Кнопка JavaScript

1. Подключение скрипта.

Для начала нам понадобится сам скрипт. Он написан на JavaScript и выглядит так:

Этот скрипт плавно возвращает к верху, а в самом конце замедляется. Его можно немного настроить.

+100 — это высота на которой скрипт начинает замедлятся вверху.
-10 — это количество пикселей, которое прокручивается при движении на верх.
20 — это 0,02 секунды за которые прокручиваются те 10 пикселей что указаны как (-10)

Скрипт можно в ставить в html код, заключив его в теги:

Для WordPress
Лично я не люблю засорять html код лишним, поэтому я создал папку js(в некоторых темах она есть по умолчанию.) в которой создал файл backtop.js и в него поместил код возврата.
Потом в файле footer.php перед закрывающимся

указываем путь к файлу:

Если Ваш возврат будет не плавным, а резко перескакивать вверх, то нужно вставлять не в footer.php, а в header.php перед закрывающимся

2. Добавление кнопки.

В подходящее место html-кода страницы необходимо добавить такой код:

Для WordPress
этот код лучше поместить в файл header.php
После этого скрипт уже будет работать и его можно проверить на деле. Но для нормального отображения, нужно задать стили CSS.

2. Подключение стилей CSS.

В конец файла стилей вставить следующий код:
Для WordPress
это файл style.css

После вставки и сохранения, Ваша кнопка станет как и на моем сайте — внизу справа.
Стили можете настроить как хотите, и ваша кнопка будет радовать вас и ваших посетителей.

0 — это отступ в пикселях, до какого места возвращаться.
500 — это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.

Подключаем кнопу следующим кодом:

также нужно подключить jQuery(если она у вас подключена, то этого делать не нужно.)

Для WordPress
Подключаем все так же как и версию JavaScript выше и настраиваем стили.

На этом все. Спасибо за внимание 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂

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

На сайтах с большим количеством контента (например, блоги) просто необходимо использовать кнопку «Наверх». Ведь пользователю, прочитавшему большую статью, может понадобиться вернуться в верхнюю часть страницы для продолжения навигации по сайту. Или посетитель, перед тем как прочитать статью полностью, пролистывает ее от начала до конца и пробегает глазами по заголовкам, картинкам, схемам, чтобы заранее оценить, стоит читать статью или нет. Обычно, в таких случаях, при отсутствии кнопки «Вверх», посетитель просто скролит страницу вверх колёсиком мыши или при помощи скрола (в боковой части браузера).

Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.

Кнопка наверх: HTML+CSS

Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:

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

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки «Наверх» на сайт.

В начало страницы на Android

Как на Android вернуться к началу страницы? Вот читаю я комментарии к посту, долистал до середины и нужно мне к верхнему меню. Как это сделать одним жестом?

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

Информация об этом журнале

  • Цена размещения 300 жетонов
  • Социальный капитал 32
  • В друзьях у
  • Длительность 24 часа
  • Минимальная ставка 300 жетонов
  • Посмотреть все предложения по Промо
  • Добавить комментарий
  • 10 комментариев

Android

Выбрать язык Текущая версия v.293.1

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе.

Вариант на JavaScript

Число -100 — это количество пикселей, которое прокручивается вверх через каждые 0,02 секунды (число 20 ).

В подходящее место html-кода страницы необходимо добавить такую ссылку:

Вариант на jQuery

Число 500 — это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.

В подходящее место html-кода страницы необходимо добавить такую ссылку:

В случае, если в браузере отключен JavaScript, при клике на данную ссылку страница также прокрутится наверх, но только уже не плавно.

Кнопка «Вверх» для сайта — простой и легкий скрипт на jQuery от Яндекса

Привет, друзья. Сегодня я продолжаю делиться с вами полезными скриптами, а если говорить конкретно, то я расскажу вам историю о появлении на моем блоге кнопки вверх. Меня уже давно просили написать, как сделать такую же кнопочку, но мне было жалко «палить контору», но сегодня я вдруг передумал…

Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу 🙂

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

Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!

Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально 🙂 Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.

NB: это не первая вещь, которую я «позаимствовал» у Яндекса, месяц назад я обнаружил на одной из промо-страниц «секретные» кнопки шаринга, о чем писал на форуме.

15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!

Установка кнопки «вверх» на любой сайт

Действительно, добавить данный скрипт можно без проблем на любой сайт или любую CMS, да что там – хоть на чистый html хоумпейдж. Самое главное и единственное условие – у вас должна быть подключена jQuery библиотека.

Оригиналов исходного кода Яндекса я не сохранил, так как при добавлении на блог я сразу менял некоторые стили и настройки. Но поверьте, в процессе интеграции все стало только лучше!
Итак, приступим к установке:

Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом

Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом

Создаём кнопку «наверх» для сайта

Рассмотрим простой способ создания кнопки «наверх» для сайта, которая будет появляться при прокрутке страницы вниз. Разберем возможность реализации на чистом javascript и найдём причины по которым она может не работать. Нам потребуется следующее:

  • Подключить jQuery библиотеку;
  • Скачать на сайт изображение кнопки;
  • Прописать в шаблоне её код, скрипт и стиль.

Подключаем jQuery . В блок «head» копируем скрипт, который будет загружать последнюю версию с сайта «Google».

Выбираем подходящее изображение и загружаем его в каталог сайта. Предоставляю на выбор несколько вариантов кнопок «наверх». Скачать можно кликнув правой клавишей мышки по рисунку и нажав «Сохранить картинку как».

Вставляем в шаблон сайта код, скрипт и стиль . Остаётся в стиле указать правильный путь к изображению, а так же его ширину и высоту. Проверяем результат — кнопка «наверх» должна появиться в правом нижнем углу при прокрутке страницы. Если этого не происходит, то ищем ошибки.

Этот пример должен работать в большинстве случаев, но на некоторых движках могут возникнуть проблемы. Например, Joomla использует фреймворк «Mootools», который часто конфликтует с jQuery. В таком случае можно воспользоваться упрощённой плавающей кнопкой «наверх».

Как сделать кнопку «наверх» без jQuery

Можно сделать плавающую кнопку «наверх» на чистом javascript без использования сторонних библиотек. Стили берём из предыдущего примера. Скрипт и код копируем в любое место шаблона.

Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.

Что делать, если кнопка «наверх» не работает

Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;» и проверьте, появится ли она. Нет? Значит проблема в неправильном пути к изображению или код кнопки размещён в неподходящем месте. Попробуйте разместить его перед закрывающимся тегом «body».

Если кнопка при изменении свойства отображается, значит дело в скриптах. Следует проверить, подключена ли библиотека jQuery и не конфликтует ли она с «Mootools» (актуально для Joomla). Всё в порядке? Тогда оберните скрипт в следующую конструкцию.

Это позволит выполнить скрипт только после загрузки всей страницы. Не помогло? Пиши в комментариях и мы постараемся найти причину неработоспособности.

Смотрите так же:  Интерактивное методическое пособие