Как сделать кнопку вверх html
Кнопка «Наверх» на чистом JavaScript
Сложность
Описание
Создаем кнопку на нативном JavaScript, без jQuery. Создаем улучшенную кнопку, действующую как вверх, так и вниз.
HTML часть
Вначале разметка.
Добавляем в HTML тег a, задаем ему класс и заглавие(title). Содержимое тега будет спецсимвол ↑ он как раз и будет отображаться в виде стрелки. Важно заметить, что здесь у тега a нет атрибута href, т.к. он нам здесь не нужен.
CSS часть
Пишем стили.
В будущем вы сможете изменить внешний вид кнопки, сейчас сделаем «базовую» модель. Записываем в CSS представленный код, он стандартный, отмечу только класс back_to_top-show, мы будем его добавлять/убирать у нашей кнопке средствами javascript. В начале(после загрузки страницы) у кнопки стоит класс back_to_top и соответственно display:none; т.е. кнопка не отображается, когда мы добавим кнопке класс back_to_top-show то display станет block и кнопка появится на экране.
JavaScript часть
Теперь JavaScript.
Мы создадим два обработчика:
Вначале отслеживаем прокрутку документа.
Мы задаем два условия(if) и в зависимости от срабатывания одного из них, мы нашей кнопке добавляем/удаляем класс back_to_top-show, а следовательно делаем ее «видимой»/»невидимой». Когда мы прокручиваем документ на «один экран», кнопка появляется, и наоборот.
Теперь отслеживаем клик по кнопке.
Логично предположить, что мы можем совершить клик по кнопке только тогда, когда обработчик scrollотработал и показал ее нам. Задача здесь в добавлении анимации(плавный скролл наверх). Я решил эту задачу с помощью метода setTimeout и рекурсии(т.е. функция вызывает сама себя). За каждый такой вызов функции, мы будем прокручивать страницу вверх, в коде значение -80 это и есть параметр прокрутки документа за один «шаг»(вызов функции). Чтобы понять как это действует, нужно понимать как действует рекурсия и метод setTimeout, еще можно попробовать изменить значение -80 и второй параметр в setTimeout т.е в данном случае он равен нулю, в зависимости от этих параметров мы можем делать прокрутку быстрее/медленнее.
Готово!
Теперь соберем все воедино, переведем наш код в «строгий режим» путем добавления ‘use strict’; и обернем его в анонимную функцию, это нужно чтобы наши переменные не попали в глобальную область видимости( т.е. чтобы не было конфликта с другими нашими скриптами).
Кнопка «Вверх» для сайта — простой и легкий скрипт на jQuery от Яндекса
Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу 🙂
Как-то изначально так сложилось, что при ведении блога я решил отказаться от постраничной разбивки комментариев к постам. Не знаю почему, может не хотел плодить лишних страниц, а может и не верил, что у меня может быть более 50 комментариев к одному посту, так или иначе, свое мнение я не изменил до сих пор – все комментарии к постам выводятся одной страницей. Однако, вот незадача, некоторые посты на моем блоге набрали уже более 500 комментариев, и это не смотря на то, что я раз в месяц их подчищаю. Короче, это была предыстория – а результат такой, что пришлось добавить на блог кнопку вверх. В результате навигация по длинным постам с комментариями значительно упростилась.
Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!
Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально 🙂 Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.
NB: это не первая вещь, которую я «позаимствовал» у Яндекса, месяц назад я обнаружил на одной из промо-страниц «секретные» кнопки шаринга, о чем писал на форуме.
15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!
Установка кнопки «вверх» на любой сайт
Действительно, добавить данный скрипт можно без проблем на любой сайт или любую CMS, да что там – хоть на чистый html хоумпейдж. Самое главное и единственное условие – у вас должна быть подключена jQuery библиотека.
Оригиналов исходного кода Яндекса я не сохранил, так как при добавлении на блог я сразу менял некоторые стили и настройки. Но поверьте, в процессе интеграции все стало только лучше!
Итак, приступим к установке:
Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом
Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.
Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом
Кнопка наверх для сайта — Создай сам быстро и бесплатно!
Как создается кнопка наверх для сайта с помощью специального плагина и без него на jQuery и CSS? Узнай сейчас!
Здравствуйте, уважаемые друзья и гости блога! В этой статье будет рассказано и показано, как создается кнопка наверх для сайта при помощи специального плагина, а также на jQuery и CSS. Если Вам это интересно, то пожалуйста давайте приступим к изучению и созданию кнопки наверх для сайта. Поехали …
Как Вы уже наверное знаете, что на любом сайте самое главное — это контент! И не все сайты могут похвастаться, что у них страницы имеют сжатый и краткий вид, который не приходится долго скролить (прокручивать), чтобы все прочесть. Есть страницы сайтов, где контент занимает очень большое пространство и чтобы прокрутить страницу сайта для изучения необходимого материала, нужно скролить его очень долго. А затем чтобы попасть на верх страницы надо крутить колесиком мышки в обратную сторону. Но есть инструмент облегчающий жизнь вебмастеру и пользователю сайта — это кнопка «НАВЕРХ»!
Теперь давайте узнаем, как делается кнопка наверх для сайта с помощью нескольких инструментов …
Кнопка наверх для сайта при помощи плагина WPFront Scroll Top
Для того, чтобы создать кнопку наверх для сайта быстро и без знаний языка программирования jQuery и CSS, необходимо воспользоваться простой установкой плагина для движка WordPress — WPFront Scroll Top.
Вам просто-напросто нужно забить в поиске новых плагинов своей админки его название и он обнаружится автоматически. Также и установка этого плагина будет не проблемой. Вам нужно нажать на кнопку «Установить», а затем «Активировать»:
Настройка плагина WPFront Scroll Top довольно проста и к тому же он обладает огромным набором кнопок «НАВЕРХ» для вашего сайта. Вот убедитесь сами:
Что касается настройки плагина WPFront Scroll Top? Сейчас расскажу про самые основные моменты …
А лучше покажу видео — установка и настройка плагина WPFront Scroll Top:
Как сделать кнопку наверх для сайта плагином WPFront Scroll Top? Смотри!
Теперь идем дальше и давайте узнаем, как можно при помощи jQuery и CSS создать на своем сайте замечательные кнопки «НАВЕРХ» …
Создаем кнопку для сайта «НАВЕРХ» на jQuery и CSS!
Для того, чтобы создать кнопку плавной прокрутки страниц вашего сайта на jQuery и CSS Вам необходимо иметь всего пару вещей. Я их Вас сейчас дам!
Вот примерная картинка самой кнопки «наверх»:
Но Вы сможете изменить эту картинку на свою в любое время!
Также нужен код jQuery и CSS, которые являются основными элементами в построении кнопки наверх для сайта. Вот этот код:
Сделаем красивую кнопку вверх для сайта
Есть кнопка при клике на нее мышкой мы переходим на самый верх сайта.
Сделаем вначале простую структуру с пустыми секциями, расстояние между секциями 700 пикселей и со второй секции у нас будет появляться кнопка вверх.
Создадим новый див внизу верстки с классом top и иконкой стрелочки вверх шрифта font awesome.
Добавим title=Вверх, чтобы при наведении было пояснение.
Задади стили css в main.sass.
Позицию сделаем фиксированной position: fixed, сделаем иконку снизу bottom: 30px.
Цвет будет серый фона. Чтобы иконка была сверху всегда делаем z-index: 11.
Иконка будет в круглом фоне с радиусом border-radius: 10em и размерами 50 пикселей.
Сама иконка стрелочки будет темной, с шрифтом 30 пикселей.
Для центрирования иконки стрелочки по горизонтали мы используем text-align: center, для вертикали line-height: 50px.
При наведение на иконку у нас должен меняться курсор cursor: pointer, теперь меняется курсор и подсвечивается надпись вверх.
Стили при наведение на иконку вверх.
Теперь зададим свойства при наведении мышкой &:hover.
Цвет иконки будет белой, а фон сделаем серым.
Прозрачность не будет.
Чтобы кнопка появлялась плавно справа, когда прокрутили первый экран.
Зададим свойство &.active, когда кнопка станет активной ее положение станет right: 30px.
Для этого напишем скрипт.
Код в main.sass.
Проверим в браузере результат при наведении мышкой и без.
Скрипт для кнопки вверх.
Зайдем в файл common.js и напишем $(window).scroll с функцие.
Теперь делаем наоборот поднимаем вверх страницу это условие иначе else, мы у класса top забираем active, запишем $(.top).removeClass (active).
Проверяем теперь при скролле экрана выезжает кнопка справа, но при клике мышкой на нее ничего не произойдет.
Делаем функцию плавного подъема вверх после нажатия на кнопку $(.top).click.
При клике мы берем родительские классы $(html, body) и анимируем их предварительно выполнив служебную функцию стоп stop ().animate, если будет другая анимация она остановится это стандартные функции jquery.
После скроллим вверх scrollTop: 0, с параметрами медленно slow, swing.
Проверяем и видим, что сайт переходит на вверх.
Урок 2. Скажи, как установить…. Иначе мы тебя застрелим!
Привет всем!
Здесь мы поговорим о продолжении такой темы: «Как сделать прокрутку на сайте?«. Кнопка вверх-вниз для сайта будет работать на вашем блоге без всяких плагинов на ура! Мы прибежим к небольшим хитростям и используем простые скрипты для сайта, с такой же понятной структурой и простой установкой!
Ну начнем с того, я не буду вам проповедовать, что здесь нет никакой нагрузки на блог! Нагрузка есть и будет всегда и ее никогда не избежать! Но устанавливая вот такие скрипты, замечу — «простые скрипты» для сайта, вы в принципе ничего не теряете!
В этой статье я представлю классные скрипты, которые подыскал специально для вас! Так что смотрим, читаем, пробуем установить себе, комментируем, нажимаем на лайки, подписываемся на мой блог! Будьте активными!
А теперь немного о тех кошаках со стволом, что вы видите в начале статьи (эх, а так хотелось написать со стволами)!
Хотите верьте, хотите нет, а дело было так:
Просыпаюсь от жуткого стука в двери… Открываю я двери… А там эти: два жутких, наглых, рыжих кота бандитской наружности, да и еще стволом размахивают!
Скажи, да скажи! Я же конечно со встречным вопросом и перепуганными глазами, с дрожью в руках и ногах задаю встречный вопрос:
Я — Что сказать?
Они опять — Скажи, как установить…?
Я — Да что установить?
Они — Как установить стрелки вверх-вниз на блог с помощью скриптов?
И тут как обрезало! Просыпаюсь в холодном поту и быстро начинаю писать вот этот пост!
Вот такой у меня получился забавный двойной сон:)! Заработался я что-то, устал наверное, вот и приходят потом во снах вот такие любопытные блоггеры!
Ладно приступим к нашим скриптам!
Скрипт небольшой, как и обещал! Присобачить его можно в любое место, где пойдет там и праздник! Но я как уже более продвинутый блоггер советую вставить данный скрипт в подвал вашего блога! Так он не будет выскакивать вперед вместе с вашей шапкой и остальными прибамбасами и тормозить загрузку вашего блога — пускай сидит в подвале!
Заходите в панель управления вашим блогом: Внешний вид — Редактор — Подвал (footer.php). Листаем в самый низ и вставляем данный скрипт, сохраняем, обновляем страницу блога и любуемся результатом!
А сейчас немного о скрипте и работоспособности:
На своем сайте я их проверить не смог, так как у меня там стоит форма обратной связи от Redhelper. И стрелки получается как раз под ней! Но недавно я устанавливал их знакомому блоггеру и все работало на ура!
Вот мне немного тут помогли — стрелки работают:) Стрелки стоять простые, но их в любую минуту можно сменить под свои и все загнать под свой дизайн!
Так же если вы особо шарите в html, можете сменить и положение стрелочек! Хотя, с такими навыками — создайте свой!
Но все же поэкспериментировать с положением можете в этой строчке:
Переходы здесь будут не плавными, по сравнению с применением плагинов в первом уроке. Стрелочки всегда на виду и они не маскируются под ваш дизайн! Но не беда, как я уже говорил — можно найти стрелочки под свой дизайн или заказать у меня за хлебные крошки:) И я вам сделаю или найду уникальные стрелочки под ваш блог!
Картинки данных стрелочек хранятся на моем блоге. Если вы хотите перенести их на свой сервер, или загрузить новые, то в последствии вам нужно будет изменить путь к картинке в самом скрипте! Вот в этих двух местах:
Картинки (стандартные, так сказать) можете скачать, скопировав мой прописанный путь в коде выше и вставив его в новое окно вашего браузера. А далее, делаете клик правой кнопкой мыши — Сохранить картинку как…
Где брать этот путь к картинке, можете в первом уроке посмотреть видеозапись — здесь!
Да, не столько скрипта, сколько описания!
Кому интересно, почему я стал в последнее время так редко писать? Тогда слушайте!
Начало…
Началось все с того, что я писал вот эту статейку — Урок 1. Как сделать прокрутку на сайте: вверх, вверх-вниз с помощью специальных плагинов?
И вроде все хорошо, писал полночи, все сделал по высшему разряду! А утром встаю и мне говорят (знакомый блоггер) что статьи нету! Как так нету?
И только к середине дня я заметил, что статьи реально нет! Как так? Вчера обновлял страницу много раз — все было! Меня удивило только одно тогда: когда делился статьей в соц.сети туда шла только одна ссылка (не как всегда: картинка ссылка, описание)!
Вообщем расстроился я сильно (все же как-никак статью пару дней писал)!
И тут я вспомнил про свое дисковое пространство на сервере (был 1гб, оно уже давно было на красной пометке)!
Смотрю, а там уже перебор! Но у меня были мысли на счет того, что если я оплачу хостинг на 2 Гб — все мои утерянные данные вернутся! Хотя этого так и не произошло! Даже сохраненные черновики данной статьи были утеряны!
P.S. Были такие мысли, что это я что-то нахимичил: не сохранил, удалил случайно и т.д.
Вообщем я уже начал сомневаться и только после второго совета обратится в тех.поддержку хостинга, мои сомнения пропали! Написал я им, изложил всю суть и они быстренько все восстановили (хорошо что я за тот день ничего масштабного не делал на сайте)!
Ну как бы на этом еще не все!
Вообщем пока писал эту статью, химичил со скриптами и я был в качестве подопытного! Я всегда так, перед тем как что то дать вам — проверяю на себе!
Кстати всегда храню чистую копию своего используемого шаблона (если что, то обращаюсь к нему)!
И последнее!
Устанавливал вот этот скрипт, о котором дальше пойдет речь, а он все не работал и не работал — не находило путь к файлам которые я закидал на сервер!
Опять написал в тех.поддержку — оказалось что ip адрес сервера сменился еще неделю назад, а я все на старом сижу!
Вывод я сделал такой, что нужно повнимательней читать их письма!
Вообщем все настроил, проблемы вот такие решил (который сам в принципе и создал), теперь речь пойдет дальше о скриптах!
Следующий скрипт наподобие первого, но немного получше и посложнее! Кнопка вверх-вниз с плавным переходом: