Scrollto smooth не работает

CSS Smooth scrolling свойство не работает

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

У меня простая html-страница:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia. A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius! Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo! Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea. Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores! Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum. Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum? Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus? Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel. Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate? Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas! Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus. Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta. Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor. Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque. Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure. Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.

Second Title

Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit? Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis. Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus. At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed! Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque. A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore? Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste! Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae. Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat! Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam? Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!

Источник

Сглаживание window.scroll не работает в Safari

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

Это прекрасно работает везде (включая телефоны Android), но в Safari (для настольных ПК и iphone). В этих случаях он прокручивается в правильную позицию, но он не плавный, он как будто прыгает.

Я сделал небольшую демонстрацию по Codepen, доступную здесь. Просто нажмите на опции меню навигации, и он будет там прокручиваться. Это будет гладко на Chrome, но не на Safari.

Это не поддерживается? (похоже, это не тот случай, когда просматриваете документ) Какие варианты поддерживаются?

3 ответа

window.scroll поддерживается, но scroll-behavior CSS — нет.

В ожидании поддержки рассмотрите возможность использования smoothscroll-polyfill, который добавляет поддержку плавной прокрутки для Safari, IE, и край.

В частности, в контексте JavaScript неподдерживаемая часть — это параметр behavior в scrollToOptions, как подробно описано здесь:

Я недавно записал свои идеи в функцию, которая является своего рода полифилом из-за отсутствия поддержки функции плавной прокрутки в браузерах IOS и настольном Safari. Некоторые могут назвать это кровавым обходным путем, но эй, это работает. Это не требует jQuery, это чистый javascript.

Вы можете передавать аргументы функции в виде числового значения (scollTo-position в пикселях) или в виде вызова элемента с индексом (в моем случае узлы LI в UL -> «article»).

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

Источник

Способы добавления плавной прокрутки страницы в CSS и JavaScript

Наверняка вы посещали страницы, которые плавно прокручивают контент при клике на ссылке к соответствующему блоку. Это красиво выглядит на лэндингах (LandingPage, или посадочная страница), в которых пространство страницы разбито на части, или в больших статьях с содержанием. Такая прокрутка называется скроллингом (от англ. scroll).

Однако, это не только красиво, но и достаточно просто с точки зрения реализации.

Прокрутка страницы с помощью CSS

Для того чтобы плавная прокрутка происходила на всей странице, необходимо добавить свойство scroll-behavior: smooth для селектора html .

Если плавная прокрутка необходима в пределах какого-то контейнера, то это свойство назначают для него.

По умолчанию свойство scroll-behavior имеет значение auto , т.е. прокрутка будет обычной, без эффекта плавности.
Посмотрите пример, основанный на css-свойстве (открыть в новой вкладке):

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

Ложкой дегтя для этого свойства будет неполная поддержка его браузерами. Вы можете посмотреть, какова она на скриншоте и на caniuse.com.

Поддержка свойства scroll-behavor браузерами

Поэтому рассмотрим, как сделать плавную прокрутку с помощью jQuery и JavaScript.

Скроллинг с помощью jQuery

Понятно, что для использования jQuery вам нужно будет сначала подключить эту библиотеку. Дальше нужно будет отслеживать клики по ссылкам, у которых есть хэш ( # ) и анимировать свойство scrollTop для селектора $(‘html, body’) .

Сам код будет небольшим:

Это решение является кроссбраузерным, хотя у него есть один недостаток — если на вашем сайте jQuery не используется для работы с другими объектами/плагинами, то подключать лишние 88кб или порядка 40кб в gzip-сжатом виде не очень интересно ради 10-15 строк кода.
Пример (открыть в новой вкладке):

Плавная прокрутка на JavaScript

Здесь тоже есть 3 решения, каждое из которых использует свой подход к созданию плавности прокрутки с помощью разных JS-методов.

Решение 1. Метод scrollIntoView()

Из документации на MDN узнаем, что

Метод Element.scrollIntoView() прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

Этот метод имеет параметры, подобные css-свойству scroll-behavior: smooth для прокрутки контента к элементу с нужным id, указанным в виде хэш в ссылке.

К сожалению, и тут не обошлось без «ложки дегтя» в виде поддержки браузеров. Давайте обратимся к caniuse.com и увидим такую картину:

Поддержка свойства scrollIntoView браузерами

К сожалению, нужное нам значение свойства behavior: ‘smooth’ поддерживается не всеми браузерами.

Кроме того, если верхняя панель навигации у нас зафиксирована, т.е. имеет свойство position: fixed , то нужно будет добавить к прокрутке смещение на ее высоту.

Пример прокрутки контента с помощью метода scrollIntoView() (открыть в новой вкладке)).

Решение 2. Используем window.scrollBy() для плавной прокрутки.

Тут все методы и свойства и имеют хорошую поддержку браузерами.

Код JavaScript предполагает, что на вашей странице нет абсолютно позиционированной или фиксированной шапки сайта (элемент ), в котором чаще всего размещаются ссылки-якоря на разделы страницы, поэтому переменная offsetTop (смещение сверху) сначала задана как 0.

Источник

JavaScript — window.scroll(< behavior: 'smooth' >) not working in Safari

As the title says, it works perfectly fine on Chrome. But in Safari, it just sets the page to the desired top and and left position. Is this the expected behaviour? Is there a way to make it work nicely?

8 Answers 8

Use smootscroll polyfill (solution for all browsers), easy applicable and lightweight dependency: https://github.com/iamdustan/smoothscroll

Once you install it via npm or yarn, add it to your main .js, .ts file (one which executes first)

Behavior options aren’t fully supported in IE/Edge/Safari, so you’d have to implement something on your own. I believe jQuery has something already, but if you’re not using jQuery, here’s a pure JavaScript implementation:

And if you need horizontal scrolling:

And an example call is:

For a more comprehensive list of methods for smooth scrolling, see my answer here.

window.requestAnimationFrame can be used to perform smooth scrolling in an exact amount of time.

For smooth vertical scrolling, the following function can be used. Note that horizontal scrolling can be done in much the same manner.

For more complex cases, the SmoothScroll.js library can be used, which handles smooth scrolling both vertically and horizontally, scrolling inside other container elements, different easing behaviors, scrolling relatively from the current position, and more. It also supports most browsers that do not have native smooth scrolling.

The solution with the smoothest performance, especially if you want to incorporate easing is to use requestAnimationFrame:

if you want to later cancel the scroll, you need to have a reference to your requestAnimationFrame (do this everywhere you use requestAnimationFrame(step)):

Now what if you want to use easing with your scroll and take timeouts between scroll actions?

create an array of 60 elements (requestAnimationFrame usually calls 60 times per second. It’s technically whatever the refresh rate of the browser is, but 60 is the most common number.) We are going to fill this array non-linearly then use those numbers to control how much to scroll at each step of requestAnimationFrame:

choose an easing function. Let’s say we’re doing a cubic ease-out:

create a dummy array and fill it with data piped through the easing function. You’ll see why we need this in a moment:

map easingPoints using the help of each dummyPoint ratio to dummyPointsSum:

in your scroll function, we’ll make a few adjustments:

Источник

Плавная прокрутка к якорю на JavaScript и jQuery

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

Для удобства работы с такими ссылками рекомендую установить для них определенный класс, например «scroll-to»:

У элементов, к которым нужно осуществить прокрутку, должны быть прописаны атрибуты: « id=»ya1″ » и так далее.

Прокрутка на jQuery

Самый простой способ организации плавной прокрутки, это использовать библиотеку jQuery.

В примере на все ссылки с классом «scroll-to» навешивается событие «onclick». Двумя важными параметрами в этом коде являются значения «60» и «800».

• 60 — высота фиксированной плавающей шапки, если она есть. Устанавливается чтобы при прокрутке якорный элемент не перекрывался ей. Если фиксированной шапки нет, то значение убирается или устанавливается в 0.
• 800 — скорость прокрутки в миллисекундах. Чем меньше значение, тем быстрее будет переход.

Плавная прокрутка на чистом JS

Теперь рассмотрим код на чистом JavaScript без использования сторонних библиотек.

Код вырос незначительно, а функционал остался прежним. Здесь используется стандартный JavaScript метод «scrollIntoView». Он позиционирует прокрутку так, чтобы элемент оказался в видимой области браузера. Метод принимает 2 параметра:

• behavior — определяет тип анимации — auto или smooth;
• block — задает в какое место элемента надо переместиться, принимает значения — start, center, end или nearest.

Источник