Плавный скролл js. Плавный переход к якорю-ссылке

На одном из сайтов нужно было реализовать прокрутку (скролл) страницы наверх с плавной анимацией. На jquery это делается одной командой:

$("html,body").animate({scrollTop:0},500);

А на чистом яваскрипте немного сложнее:

var t;
function scrolltop() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) {
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
} else {
clearTimeout(t);
}
return false;
}

Переменная top равна текущему расстоянию прокрутки страницы в пикселях. Каждые 30 мс эта величина уменьшается в 1,5 раза, в итоге плавно достигает нуля. Это имитация свойства ease-out в CSS анимациях.

Если вам нужно скроллить страницу наверх линейно, без ускорения, то пишем как-то так:

window.scrollTo(0,-20);

Тогда страница будет скроллиться наверх со скоростью 20 пикселей в 30 мс.

Чем обусловлен период в 30 мс? Кофмортная частота обновления экрана — примерно 30 кадров в секунду, значит, продолжительность каждого кадра — 30 мс. Для идеальной гладкости можно сделать 60 кадров в секунду, и тогда таймауты должны быть примерно по 15 мс. Но это может подтромаживать на слабых устройствах.

Благодарность автору сайта

Если Вы хотите поддержать проект, воспользуйтесь платформой Яндекс.Деньги — это конфиденциально и безопасно.

Здравствуйте, друзья. Хочу затронуть такую тему, как плавный переход к якорю-ссылке на странице сайта. Если вы пишете на своем сайте объемные тексты, грамотно его форматируете, скриншотами и другими элементами, то плавный скроллинг к якорю придаст оформлению еще большую привлекательность. Но давайте для начала узнаем, что это такое и как оно будет работать. Пример работы вы можете наблюдать на этой странице, нажав на пункты этого списка.

Что такое якорь-ссылкаКак сделать ссылку-якорь HTML

Ссылки-якоря делаются на языке гипертекстовой разметки . Создание якоря в HTML — дело совсем не хитрое. Требуется всего лишь небольшие знания в этом языке и понимание принципов его работы. если с этим у вас проблем не возникает, то вы сможете сделать это без особого труда. Итак, чтобы сделать якорь на странице HTML, нужно прописывать в коде примерно следующее.

И для того, чтобы перейти к этому месту на странице, где указана данная метка, нужно в ссылке прописать вот это:

Переход к метке на странице

При таком подходе переход будет осуществляться мгновенным скачком с одного места на другое

Плавный скроллинг к якорю

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script type= "text/javascript" > $(document) .ready (function () { $("a" ) .click (function () { elementClick = $(this ) .attr ("href" ) ; destination = $(elementClick) .offset () .top ; if ($.browser .safari ) { $("body" ) .animate ( { scrollTop: destination } , 1100 ) ; } else { $("html" ) .animate ( { scrollTop: destination } , 1100 ) ; } return false ; } ) ; } ) ;

$(document).ready(function() { $("a").click(function () { elementClick = $(this).attr("href"); destination = $(elementClick).offset().top; if($.browser.safari){ $("body").animate({ scrollTop: destination }, 1100); }else{ $("html").animate({ scrollTop: destination }, 1100); } return false; }); });

Подключить этот скрипт можно тремя способами. Первый, это вставить на страницу между тегами head. Второй — вынести в отдельный файл и подключить отдельно примерно таким образом:

Метка на странице для перехода на нее

Во-вторых, если хотите, чтобы плавный скроллинг осуществлялся не ко всем якорям, а только к определенным, нужно изменить третью строчку скрипта вот так:

Переход к метке на странице

Еще один нюанс, о котором хотелось сказать, это то, что в отличии от простого якоря HTML, jQuery якорь не прописывает в адресной строке браузера ссылку на якорь при переходе к нему. Чтобы вы понимали о чем речь, приведу пример того, как может выглядеть ссылка на якорь в адресной строке браузера.

#anchor

В последнее время все большую популярность набирают анимации, проигрываемые по мере прокрутки страницы. Однако, я заметил, что подавляющее большинство браузеров не создано для таких анимаций. Прокрутка страниц мышью в них происходит не плавно (как в Firefox), а ступенчато. В результате скролл-анимации на страницах проигрываются тоже рывками. По моему мнению, проблема здесь совсем не в браузерах, а в плагинах, которые используются для создания этих анимаций. Потому что именно они допускают резкие скачки. Я считаю, что для любой анимации должна быть какая-то максимальная скорость воспроизведения, при которой анимация будет плавной, а пользователь сможет понять, что же произошло на странице. Если вы со мной согласны, то плавно и без рывков перемещайтесь под кат.

В этой статье речь пойдет о плагине для создания анимаций, контролируемых скроллом, который я назвал Scrollissimo. Ближайшим его аналогом является плагин ScrollMagic . Из общих черт у них – их предназначение и то, что в качестве движка анимации выбран Greensock . Если вы с ним еще по какой-то причине не знакомы, то, возможно, для полного понимания всего происходящего вам следует почитать статьи про Greensock, которые уже выходили на Хабре. Например эту .

Помимо общих черт у этих плагинов есть и различия. Но особенно выделить хотелось бы главное – плавная анимация. Дабы это не прозвучало голословно вот вам пруф . Главная страница ScrollMagic также подтверждает мои слова.

Как им пользоваться?Подключаем Для того, чтобы начать использовать Scrollissimo необходимо сделать две вещи. Во-первых, подключить Greensock. Можно подключить только минимально необходимые библиотеки (TweenLite, TimelineLite и CSS):

либо, подключить одну библиотеку, содержащую все вышеперечисленные:

А во-вторых, подключаем сам Scrollissimo. Библиотека доступна из репозитория. А для пользователей bower также есть возможность установки командой

Bower install scrollissimo
Скачали, теперь подключаем:

По желанию можно (но необязательно) подключить jQuery для собственного удобства. Далее в статье я буду писать код с его использованием для пущей удобочитаемости.

Я предусмотрел возможность срабатывания Scrollissimo не только на скроллинг всей страницы, но и на любое другое событие, однако в подавляющем большинстве ситуаций вам надо подписываться на событие прокрутки страницы:

$(window).scroll(function(){ Scrollissimo.knock(); });
Теперь при каждом наступлении события scroll Scrollissimo будет вычислять текущий прогресс анимаций и воспроизводить ее.

NOTE: Если вам не нужно, чтобы плагин сам считал прокрутку страницы, то вы можете передать свое значение свойства scrollTop в метод knock().Так к примеру, Scrollissimo.knock(1000) скажет плагину о том, что вы промотали страницу на 1000 пикселей.

NOTE: Для поддержки тачевых устройств есть touch-адаптер scrollissimo.touch.js, который борется с «заморозкой» страницы во время прокрутки.

Всё, теперь можно непосредственно анимировать! Scrollissimo умеет анимировать твины (одиночные анимации) и таймлайны (очередь одиночных анимаций). Начнем с твинов.

Простейшая анимация Пусть у нас есть красивый красный div по имени Divy. Ему очень хочется вырасти, но пока он всего 50 пикселей в ширину и высоту.

#Divy{ position: fixed; top: 0; left: 0; height: 50px; width: 50px; background: red; }
Давайте сделаем так, чтобы уже через 1000 пикселей от начала страницы он стал 300 пикселей в ширину. Для этого сначала создадим соответствующий твин, как если бы мы делали обычную анимацию с помощью Greensock:

Var divyTween = new TweenLite($("#Divy"), 1000, { width: 300 });
NOTE: Как вы заметили, единственное отличие от стандартной анимации на Greensock состоит в том, что продолжительность анимации мы указываем не в секундах, а в пикселях (в нашем случае 1000).

Отлично! Осталось только отдать этот твин на съедение Scrollissimo:

Scrollissimo.add(divyTween, 0, 6);
Сейчас давайте притормозим и разберем эту строчку. Первый аргумент – это тот самый твин, который мы создали. Второй аргумент – с какой позиции начинать анимацию. В нашем случае это начало страницы (0 пикселей). Остался третий аргумент. Тут мы и подбираемся к главной особенности, отличающей Scrollissimo от обычных плагинов. Третий аргумент – это максимальная скорость воспроизведения анимации. Измеряется эта скорость в абстрактных безразмерных единицах и подбирается «на глаз». Сразу отвечу на вопрос «А что будет, если не указать третий параметр?» Если вы не укажете максимальную скорость, то ее и не будет. Эта анимация будет воспроизводиться также, как воспроизводилась бы обычными плагинами.

Таймлайны Итак, Divy вырос в ширину. А как нам помочь ему вырасти и в высоту? Здесь нам помогут цепочки анимаций или, выражаясь в терминах Greensock, таймлайны. Если вы использовали их раньше для построения анимаций, то для вас тут нет ничего нового. Точно также, как выше мы поступили с твином мы поступаем с таймлайном. jsFiddle

Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 { width: 300 }); divyTimeline.to($("#Divy"), 1000, { height: 300 }); Scrollissimo.add(divyTimeline, 0, 6);

Заключение Это все, что необходимо для успешного создания скролл-анимаций с помощью Scrollissimo. На этом, пожалуй, и закончу статью. В заключение скажу, что плагин находится в стадии активного развития, ему есть куда расти и в чем улучшаться. Поэтому я буду рад любым вопросам, советам и фичреквестам.

Верстайте, анимируйте!

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

Наверняка вы видели подобный эффект на других лендингах. Сегодня вы узнаете, как его реализовать.

Плавная прокрутка к якорю при помощи javascript

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

Начнем с того, что подключим библиотеку jquery к нашему проекту и пропишем путь к скрипту, который отвечает за плавность прокрутки:

С этим справились. Теперь необходимо поставить метки и якоря, к которым будет происходить прокрутка.

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

Техника для клининга
Техника для строительства
Акции

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

Для того, чтобы осуществлялся переход к нужному месту на сайте, достаточно добавить ссылку на идентификатор нужного блока. Давайте сделаем это.

Техника для клининга
Техника для строительства
Акции

Теперь необходимо задать идентификаторы "cleaning", "building", "actions" соответствующим блокам. У меня это выглядело так:

Обратите внимание на атрибут name=»cleaning». Он должен соответствовать идентификатору. Вот сам скрипт:

$(function () { $("a.scrollto").click(function () { let elementClick = $(this).attr("href") let destination = $(elementClick).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, 1100); return false; }); });

Если вам, как и мне, нужно будет реализовать прокрутку к нескольким элементам, то просто ставьте идентификаторы, подобным образом и все! Очень удобный способ и простой в реализации.Я не утверждаю что он лучший, но он работает. Если кто-то сможет его упростить, сократить или как-то улучшить, буду вам очень признателен. Как по мне, так данный эффект может многим пригодиться.

Обратите внимание на то, что вначале статьи мы указали название и путь скрипта такой:

То есть, вам необходимо создать папку в корне вашего сайта с названием js и в нее поместить файл с именем perehod.js. А уже в него вставить сам код скрипта. Это я так, на всякий случай. Вдруг кто-то не поймет.

А на сегодня — все. Теперь вы знаете, как реализовать такой классный эффект, как плавная прокрутка страницы к якорю. Всем пока!

P.s.: Спасибо тем, кто откликнулся на призыв в социальных сетях помочь с идеями для новых статей. Не знаю, почему вы решили писать в личные сообщения, оставляйте лучше в комментариях, так другим людям будет проще написать отзыв, если они будут видеть, что кто-то более смелый, уже сделал это.

У данного способа есть недостаток, он плохо работает с wow.js, который мы использовали при создании анимации в статье. Некоторые анимации не проигрываются и на их месте остается пустое место. Если кто знает, как это исправить, напишите пожалуйста в комментариях или в