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

Плавная прокрутка к якорю средствами css?

Здравствуйте! Есть ли возможность сделать прокрутку до якоря на странице, только на css? Если да, то как?

Ах ты шайтан!)) Вкопилку. потом разберусь что там куда, и как улучшить))

Просто нет слов! Сидел ломал голову над JS вариантами, а оказывается всё решается 3-мя строчками, да еще и в HTML.
Спасибо, дорогой коллега!!

Egor, Egor,
Было-бы хорошо так если-бы не было-бы так плохо с поддержкой на остальных браузерах.
scroll-behavior: smooth;
Даже если откинуть все малоиспользуемые браузеры остаются Safari и IE без поддержки..
Решение не подходит (если конечно вы не решили забить на пользователе тех браузеров)

Зачем засорять CSS десятками строк кода, если существует вот такое простое решение на jQuery?
https://impuls-web.ru/plavnaya-prokrutka-stranicy-.

Вы можете воспользоваться полифилами
Просто перейдите по этой ссылке в github репозиторий и установите его в свой проект.

• Изначально поддерживается в Chrome и Firefox
• Safari 6+
• Internet Explorer 9+
• Microsoft Edge 12+
• Opera Next

Его довольно просто использовать

let button1 = document.getElementById('button1'); let button2 = document.getElementById('button2'); let formaSend = document.getElementById('main-form'); button1.addEventListener('click', smoothscroll); button2.addEventListener('click', smoothscroll); function smoothscroll() < formaSend.scrollIntoView(< behavior: 'smooth' >); >

прокрутка до yakor 




zz




zz




zz




zz




zz




zz




zz




zz




zz




zz




zz




zz 

zz

И это действительно прокрутка страницы, а не перемещение элементов по странице как у 0X12eb

Войдите, чтобы написать ответ

Как сделать ромбообразную сетку?

Источник

Как сделать плавный скролл к якорю

Узнайте, как сделать плавный скролл к якорю на вашем сайте с помощью двух простых примеров на JavaScript и CSS!

Плавный скролл к якорю – это популярная функциональность на современных сайтах, которая позволяет пользователям плавно перемещаться к определенному разделу страницы. В этой статье мы рассмотрим, как реализовать такой эффект с использованием JavaScript и CSS.

Пример плавного скролла с использованием JavaScript

Для начала создадим HTML-структуру с несколькими якорями и ссылками на них:

       
Секция 1
 
Текст секции 1.
 
 
Секция 2
 
Текст секции 2.
 
 
Секция 3
 
Текст секции 3.
 
   

Теперь добавим JavaScript-код для реализации плавного скролла:

document.querySelectorAll('a[href^="#"]').forEach(anchor => < anchor.addEventListener('click', function (e) < e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView(< behavior: 'smooth' >); >); >);

Этот код будет находить все ссылки с атрибутом href , начинающимся с # , и добавлять обработчик события click . При клике на ссылку, скрипт предотвращает стандартное поведение браузера и выполняет плавный скролл к соответствующему якорю с помощью метода scrollIntoView() и опции behavior: ‘smooth’ .

Пример плавного скролла с использованием CSS

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

Это свойство scroll-behavior со значением smooth применяет плавный скролл ко всему документу. Однако стоит отметить, что это свойство пока не поддерживается во всех браузерах, в частности, в Safari.

😉 Теперь у вас есть два примера, как реализовать плавный скролл к якорю на вашем сайте. Выбирайте подходящий для вас вариант и применяйте его в своих проектах. Успехов вам в освоении веб-разработки!

Источник

Как сделать плавную прокрутку страницы до якоря?

Подскажите, как сделать плавную прокрутку до якоря на странице?

Перепробовал много способов, которые нагуглил, но ни один не работает. Делаю все по инструкциям, но все равно не получается.

Простой 3 комментария

$(function()< $('.some_link').on('click', function(e)< $('html,body').stop().animate(< scrollTop: $('#some_point').offset().top >, 1000); e.preventDefault(); >); >);

А как сделать на данном коде, чтобы some_point после окончания прокрутки упирался не в самый верх экрана, а на определенном расстоянии, к примеру 100px?

А если написать еще вот так, то будет рабоать на все ссылки в меню
$(‘.some_link’).on(‘click’, function(e) $(‘html,body’).stop().animate(< scrollTop: $(this.hash).offset().top >, 1000);
e.preventDefault();
>);

$("body").on('click', '[href*="#"]', function(e)< var fixed_offset = 100; $('html,body').stop().animate(< scrollTop: $(this.hash).offset().top - fixed_offset >, 1000); e.preventDefault(); >);

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

Sergeniy: То как повешен обработчик. Я имел ввиду, что на момент выполнения кода «.some_link» может не существовать, т.к. подгружается позже. Учитывая что я опираюсь на «body», когда вешаю обработчик, мне всё-равно когда «.some_link» появится в DOM’e.

Источник

Несколько неочевидных frontend-хитростей

Под катом вы узнаете о том, как быстро и легко оформить взаимодействие с SVG-иконками, добавить плавный скролл с помощью одного CSS-правила, анимировать появление новых элементов на странице, переносить текст на новую строку с помощью CSS и о новых способах оформления декоративной линии текста.

Оформление декоративной линии текста (text-decoration-style, text-decoration-color)

В Firefox и Safari уже довольно давно появились дополнительные возможности для оформления декоративной линии, которая добавляется к тексту с помощью свойства text-decoration.

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

Можно задавать цвет для оформления текста:

А также стиль линии:

Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari. Посмотреть рабочий пример можно здесь

Плавная прокрутка страницы на CSS (scroll-behaviour)

Малоподдерживаемое, но очень полезное свойство scroll-behaviour позволит нам одной строкой сделать скролл на странице плавным. Работает как при прокрутке в нужное место при переходе по якорям, так и при прокрутке страницы JS-ом.

• smooth — плавная прокрутка;
• instant — мгновенная прокрутка;
• auto — на усмотрение браузера.

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

Анимация появления элемента (быстро и легко)

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

Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после загрузки ответа данные добавляются в скрытый на странице блок;
3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) блок анимируется JS-ом).

Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство animation. По умолчанию анимация срабатывает при загрузке страницы либо при изменении DOM-дерева (а именно при добавлении элементу класса с анимацией или самого элемента). Поэтому, важно не хранить незаполненные блоки в DOM, а добавлять их динамически в контейнеры по мере загрузки.

@keyframes fade-in < 0% < opacity: 0; >100% < opacity: 1; >> .content

• Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
• Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.

Изучить рабочий пример можно здесь.

Разрыв строки на CSS

Если в определенном месте на странице вам нужно добавить перенос строки, а в HTML лезть не хочется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом
внутри:

К сожалению (а может, и к счастью), добавлять теги в псевдоэлементы, нельзя. Но выход есть!

SVG с интерактивными элементами

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