В новом посте я расскажу, как легко и быстро сделать область перехода наверх страницы, вроде той, что есть вконтакте и на многих других сайтах.
И, заодно, покажу как сделать меню, которое будет прокручивать страницу до нужного места. Собственно после перехода по этому меню мы и хотим вернуться наверх страницы, и быстро и удобно выбрать другой контент, расположенный на странице.
Не представляю, как я жил без этой кнопки раньше, если её нет на сайте, а прокрутка большая, то меня ломает:)
Вот как это выглядит (для тех, кто ещё не видел демо):
Нажатием на серую область слева, браузер «отскролит» нас наверх.
Инструменты: html, javascript, jquery.
Алгоритм:
1. Берем нужный шаблон джумлы, вордпресса или страницу сайта
2. Добавляем на страницу область-кнопку
Здесь надо оговориться, что показывается размещение кнопки только для вёрстки, где есть свободное место слева, не менее 30 пикселей, чтобы пользователь мог по нему попасть. Это остаётся на ваше усмотрение.
Уроки jQuery практика- как сделать кнопку наверх (back to top) как вконтакте
Я добавил div перед закрывающим тегом элемента wrap (на моей странице wrap имеет фиксированную ширину и выровнен посередине).
Наверх
И стили для области перехода (пояснения в комментариях):
type=»text/css»> /*Left fast top scroll*/ #up-button < /* позиция элемента — фиксированная на странице, в левом верхнем углу; так же задаём 100% высоту и получаем область на всю левую часть экрана шириной 100px */ position: fixed; top: 0; left: 0; width:100px; height:100%; background: #D1D1D1; display: none;/*скрываем область по умолчанию*/ > #up-button div < /*элемент с подписью названия области*/ font-weight: bold; font-size: 14px; width:50px; margin: 5px auto; color: #636363; >
3. Добавляем на страницу javascript для своевременного отображения области и реакции на клик
//высота в пикселях, при прокрутке на которую, появится область для быстрого возврата слева var scrollButtonLimit = 300; //фукнция для инициализации решения function InitScrollNavigation() < //применён jQuery //получаем область быстрого возврата наверх (div) в переменную var upButton = $(«#up-button»); //навешиваем реакцию на каждое событие скрола от пользователя $(window).scroll(function (e) < var scrollTop = $(window).scrollTop();//получаем значение прокрутки if (scrollTop >scrollButtonLimit) if (scrollTop >); //навершиваем реакцию на событие при клике на область, скролим пользователя наверх $(upButton).click(function (e) < $(window).scrollTop(0); >); > $(document).ready(function() < //навешиваем обработчики при загрузке страницы InitScrollNavigation(); >);
Вот наша область быстрого перехода и готова!
Прокручиваем вниз, появляется кнопка слева, щёлкаем, переходим наверх.
Возможно, кому-то достаточно и этого для покрытия задач.
Но мы всё равно переходим к созданию меню:)
Как сделать кнопку Наверх (Вверх) на сайте, как Вконтакте + плавный скролл. HTML + CSS + jQuery
4. Помечаем нужные «якори» — теги your-element-name, на которые мы хотим переходить на странице.
Ключевым для нас является атрибут name, о нём ещё будет сказано дальше (он может реализовать стандартный механизм переходов html).
Например, такая вёрстка:
Бродячие артисты
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ac arcu sollicitudin lacinia ac ac risus.
Весело танцуют
Aliquam tempor enim aliquet nisl ultrices pellentesque. Maecenas ultrices nulla et eros euismod pellentesque. Nam mattis mattis mi sit amet semper. Nam aliquam leo lacus. .
4. Добавляем меню
Функцией ScrollToTarget по окончании действий возвращается значение false, что не даёт браузеру перейти по ссылке.
5. Добавляем реакцию по клику на пункт меню для перехода на конент
//функция, которая будет вызываться при клике на ссылку в меню function ScrollToTarget(element) < //получем ссылку, выбираем из неё всё, что после # — название элемента a, куда мы хотим перейти var elHref = $(element).attr(‘href’); var name = elHref.substring(elHref.lastIndexOf(‘#’) + 1, elHref.length); //получаем позицию скрола элемента, на который должен быть осуществлён переход var targetTop = $(«#video-content»).find(«a[name='» + name + «‘]»).offset().top; //скролим пользователя на элемент (чуть выше элемента — для эргономики) $(window).scrollTop(targetTop — 5); return false; >
Меню готово! Щёлкаем на одном из пунктов — переходим на него на странице.
Спасибо за внимание!
Удачи и до новых встреч на просторах сети!
P.S. Надо добавить описанный скрол в блог:)
- Метки Быстрый переход наверх страницы, область перехода наверх страницы
Источник: westbound.ru
Темная панель с боку поднять вверх как Vk
Сделал так, вверх сайта зашел и прописал его в самый подвал и все.
#batyascroll:hover <
background:#272727;
box-shadow:0px -5px 10px #000;
border-right: 1px solid #423201;
var as = $(‘#batyascroll’);
as.click(function() <
$(document).scrollTo(0, 0);
>);
document.onscroll = function() <
var batyalst = ‘0.’+$(‘body’).scrollTop();
if(batyalst.length == 5) <
as.stop().fadeTo(500, batyalst);
> else if(batyalst.length == 4 || batyalst.length == 3) <
as.stop().fadeTo(500, 0);
>;
>;
Источник: zornet.ru
Кнопка наверх для сайта (почти как вконтакте)
Наверняка вы видели подобные кнопки на многих сайтах. Довольно удобная штука, стоит заметить, избавляет от скроллинга многокилометрового документа наверх. Решил сделать нечто подобное.
Логика работы скрипта очень простая — в самом низу страницы помещаем невидимый блок. Как только происходит скроллинг — этот блок становится полупрозрачным, а при клике по нему перемещаемся наверх страницы. Можно было бы задействовать любой из js фрейморков типа jQuery, но на мой взгляд для решения поставленной задачи это нелогично.
Итак, наш javascript будет выглядит вот так:
Теперь разберемся со стилями. У меня они выглядят таким образом:
body < font-family: Arial, sans-serif; font-size: 18px; background: url(bg.jpg); >#showScroll < position:fixed; bottom:0px; width:100%; margin:0px auto; height:30px; background:#aaa; display:none; opacity: 0.3; filter: alpha(opacity=30); >#cur < margin:0 auto; width:100px; font-size:26px; font-family: Arial, sans-serif; color:blue; >#showScroll:hover
Осталось в вашем документе вставить в любом месте между тегами вот такую конструкцию
и все должно заработать
Вы можете скачать архив с файлами, или посмотреть как это работает.
Источник: kumatoz.ru