Закладка

Источник

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

Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция animate.

.animate(properties, duration, easing, complete);

• properties – свойства, к которым будет применятся анимация;
• duration – время анимации, мс;
• easing – метод анимации, по умолчанию swing замедление в начале и конце или linear постоянная скорость;
• complete – функция, вызываемая после завершения анимации.

Кнопка «Вниз»

Стационарная ссылка или кнопка для прокрутки страницы в самый низ.

$(function()< $('#scroll_bottom').click(function()< $('html, body').animate(, 600); return false; >); >);

Пример

Кнопка «Наверх»

Также ссылка или кнопка для прокрутки в начало страницы.

$(function()< $('#scroll_top').click(function()< $('html, body').animate(, 600); return false; >); >);

Пример

Плавающая кнопка

Кнопка появляется в нижнем правом углу и становится фиксированной при прокрутке страницы.

#scroll_top < display: none; position: fixed; bottom: 30px; right: 30px; z-index: 1000; width: 32px; height: 32px; background: url(https://snipp.ru/img/scroll_top.png) 50% 50% no-repeat; border-radius: 50%; opacity: 0.5; >#scroll_top:hover

$(function() < $(window).scroll(function()< if($(window).scrollTop() >100) < $('#scroll_top').show(); >else < $('#scroll_top').hide(); >>); $('#scroll_top').click(function()< $('html, body').animate(, 600); return false; >); >);

Пример

Панель справа

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

.scroll_panel:hover < background: #eee; >/* Наверх */ #scroll_top < position: fixed; top: 0; bottom: 0; left: 0; width: 90px; transition: background 0.2s ease; display: block; height: 100%; text-align: center; opacity: 0.5; >#scroll_top span < display: block; width: 100%; position: absolute; left: 0; top: 20px; >#scroll_top:hover < background: #ddd; opacity: 1; >/* Скрытие панели при маленькой ширине окна */ @media screen and (max-width: 700px) < .scroll_panel < display: none; >>

$(function() < $(window).scroll(function()< if($(window).scrollTop() >100) < $('#scroll_top').show(); >else < $('#scroll_top').hide(); >>); $('#scroll_top').click(function()< $('html, body').animate(, 600); return false; >); >);

Пример

Дополненный вариант с кнопкой «Вниз»

.scroll_panel < position: fixed; top: 0; bottom: 0; left: 0; width: 90px; transition: background 0.2s ease; >.scroll_panel:hover < background: #eee; >/* Наверх */ #scroll_top < display: block; width: 100%; height: 50%; position: absolute; top: 0; left: 0; text-align: center; opacity: 0.5; transition: background 0.2s ease; >#scroll_top span < display: block; width: 100%; position: absolute; left: 0; top: 20px; >#scroll_top:hover < background: #ddd; opacity: 1; >/* Вниз */ #scroll_bottom < display: block; width: 100%; height: 50%; position: absolute; top: 50%; left: 0; text-align: center; opacity: 0.5; transition: background 0.2s ease; >#scroll_bottom span < display: block; width: 100%; position: absolute; left: 0; bottom: 20px; >#scroll_bottom:hover < background: #ddd; opacity: 1; >/* Скрытие панели при маленькой ширине окна */ @media screen and (max-width: 700px) < .scroll_panel < display: none; >>

$(function()< $('#scroll_top').click(function()< $('html, body').animate(, 600); return false; >); $('#scroll_bottom').click(function()< $('html, body').animate(, 600); return false; >); >);

Источник

Создаем переходы для страниц при помощи CSS3

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.

HTML-разметка

HTML будет состоять из пяти основных секций: заголовок и содержание четырех разделов. Каждый из разделов содержания будет иметь свой ID и класс panel. Кроме того, мы добавим еще один раздел, который будет внутри основных четырех разделов, и будет иметь класс content. Первая секция с ID #home будет иметь только класс content, и не будет содержать дополнительный блок внутри:

  
Home
 
Some content
   
 
Portfolio
 
Some content
 
   
 
About
 
Some content
 
   
 
Contact
 
Some content
 
 

В секции #header у нас будет основной заголовок и навигация:

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

CSS

Первым делом мы зададим стили нашему заголовку и навигации. Мы хотим, чтобы они были на одном и том же месте, в любое время, даже если всё остальное будет двигаться.

#header < position: absolute; z-index: 2000; width: 235px; top: 50px; >#header h1 < font-size: 30px; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); padding: 20px; background: #000; >#navigation < margin-top: 20px; width: 235px; display:block; list-style:none; z-index:3; >#navigation a < color: #444; display: block; background: #fff; background: rgba(255,255,255,0.9); line-height: 50px; padding: 0px 20px; text-transform: uppercase; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 14px; >#navigation a:hover

Все разделы, кроме #home, имеют класс panel. Здесь мы будем использовать переход всякий раз, когда элемент c этим классом вызывается в меню. Трюк заключается в использовании отрицательного отступа в классе panel в «обычном» состоянии и отсутствии этого отступа у этого класса при использовании псевдо-класса :target. Переход создает эффект выезда страницы сверху:

Далее зададим стили для класса content, который есть во всех наших секциях:

.content < right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; >.content h2 < font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); >.content p

Для того чтобы изменить цвет текущего элемента в навигации, мы будем использовать псевдо-класс :target с обобщенным родственным комбинатором (the general sibling selector), чтобы «найти» соответствующий пункт навигации:

#home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation #link-about, #contact:target ~ #header #navigation #link-contact

Вот и все, что вам нужно. Посмотрите демо-примеры, чтобы увидеть, что у нас получилось.
Демо>
Источник

Источник