Делаем кнопку «Вверх» двумя способами
Для того, чтобы облегчить навигацию на сайте стали применять разные кнопки, одна из таких кнопок — «Вверх». Обычно располагается внизу сайта и предназначена, чтобы легко переместить к верху страницы и не крутить колесо мыши. Сегодня попробуем осуществить такую кнопку двумя способами.
Нужно сказать, что оба способа не представляют никаких трудностей при установке. Все создается одним кодом. Главное знать этот код и разместить его там, где будет располагаться ваша кнопка. Итак, приступим.
Способ 1. Самый популярный, который я видел на множествах блогах. Делается она следующим образом, к адресу вашего сайта, через правый слэш, прописывается решетка, таким образом, нажимая на ссылку, вас резко переносит к шапке сайта. Некоторым не нравится резкий переход, поэтому выкладывают второй способ.
<a href="http://mysite.com/#">Вверх</a>
Способ 2. Для гурманов. Вместо ссылки используется скрипт, который плавно перенесет вас наверх страницы.
А вот и сам скрипт
<a onclick="$('body').scrollTo('0px',800, {axis:'y'})" href="javascript://">Наверх</a>
Вам только остается добавить его в нужное место на сайте.
А вот тут Гилязетдинов Руслан делает кнопку «наверх» с использованием CSS3 и jQuery
Похожие записи по теме:
Поделись статьей с друзьями в:
К записи Делаем кнопку «Вверх» двумя способами оставили отзывов:20
спасибо.сейчас попробую сделать подобное
Ответить
Каким способом будете делать?
Ответить
После работы тоже надо будет сделать данную кнопочку у себя на блоге.
Ответить
Какую именно?
Ответить
Можно скриптами, а можно с помощью плагина
Ответить
плагины не люблю. Поэтому все скриптами делаю
Ответить
Видела кнопку «Наверх», которая «прилипает» к нижней границе окна сайта.
Насколько я понимаю, это третий вариант подобной кнопки.
Мне он показался самым удобным.
Ответить
Интересно) А как сделать плавающую копку на сайт «Наверх» поверх текста?
Ответить
через яваскрипт вот тут написано http://isif-life.ru/dlya-sajta/kak-sdelat-knopku-naverx-vverx-na-saite.html
Ответить
Пользуюсь вторым способом, только код немного отличается.
Ответить
а как сделать такую же кнопку, ( я имею ввиду прилипшую ) только чтоб при нажатии на нее , осуществлялся переход на какую либо определенную страницу сайта ?
Ответить
Роман, ну это также, просто задать нужный адрес. Это в первом случае. Как во втором сделать нельзя.
Ответить
да я забыл сказать , что кнопка должна быть прилипшей картинкой, хотя уже разобрался.
вот стили к моей кнопке, а сама кнопка ведет на страницу подписки .
#back-top {
position: fixed;
top:20%;
left:96%;
z-index:1;
Ответить
оказалось все просто, всего-то 30 минут почитал книжку.
Ответить
Роман, ааа понятно. я просто сначала не понял слово прилипшая — фиксированная (по другому). да, правильно задается с помощью position: fixed;
Ответить
Красивый метод, это использовать jquery
http://displanet.ru/blog/6-delaem-knopku-naverh.html
Ответить
А куда вставлять?
Ответить
Ещё через ссылку молжно, к примеру выставить якор
и вывести ссылку наверх. по нажатию на ссылку «наверх» страница перелистается на линию, где стоит якорь m1.
———-
Если кто захочет реализовать кнопку перехода наверх через иконки, то иконки можно найти тут:
http://vova-beg.ru/magazin/pictus-80
http://vova-beg.ru/magazin/pictus-55f
http://vova-beg.ru/magazin/pictus-55
Ответить
Спасибо, как раз то, что искал!
Ответить