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

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

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

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

Простой 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.

Источник

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

Узнайте, как сделать плавный скролл к якорю на вашем сайте с помощью двух простых примеров на 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.

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

Источник

Плавная прокрутка к якорю средствами 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

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

Navbar занимает весь body?

Источник

Плавная прокрутка страницы до якоря. Пошаговая видео инструкция

Приветствую вас читатели моего блога. Сегодня мы поговорим о таком интересном эффекта как плавная прокрутка страницы до определённого места.
В качестве ДЕМО вы можете посмотреть работу нижестоящего блока.

Навигация по статье:

Что нам для этого понадобится?

Для того чтобы сделать плавной прокрутку до любого места на странице сайта нам понадобится:

1. 1. Подключить библиотеку Jquery
2. 2. Расставить якоря в тех местах до которых будет плавно прокручиваться страница сайта
3. 3. Расставить ссылки, по нажатии на которые будет осуществляться плавная прокрутка.
4. 4. Прописать специальный скрипт.
5. 5. Проверить работу.

Как правильно подключить Jquery?

Если ваш сайт работает на каком то движке, то вполне вероятно что библиотека Jquery уже подключена и подключать её повторно не нужно.

Если подключить эту библиотеку 2 раза то она может вообще не работать.

Если же вы уверены что библиотека у вас не подключалась, то вам необходимо прописать перед тегом следующую строку

Для удалённого подключения:

При этом типе подключения библиотека будет подгружаться с сайта code.jquery.com и будет взята последняя версия.

Для локального подключения вам нужно будет либо скачать файл jquery по этой ссылке Скачать Jquery

Либо перейти по адресу code.jquery.com/jquery-latest.js

И сохранить этот код в файл с расширением .js

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

При этом для разных браузеров сама формулировка в поле «Тип файла» может немного отличаться, но главное чтобы там присутствовало «JScript»

Затем вам нужно будет загрузить этот файл на ваш хостинг в папку «js» и при подключении библиотеки указать ссылку на него.

В моём случае это выглядит так:

Источник

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

Помогите с написанием универсального скрипта, задача:

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

$(document).ready(function()< $('html,body').stop().animate(< scrollTop: $('#как-указать-якорь-он-разный').offset().top >, 1000); e.preventDefault(); >);

на самой странице якорь, можно так или так, мне все равно

или я не в ту сторону вообще смотрю!?

$(window).on('load', function()< var top = $(window.location.hash).offset().top; $('html,body').stop().animate(< scrollTop: top >, 1000); >);

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

$(document).ready(function() < //навигация - плавный скроллинг к якорю $("#nav_scroll").on("click","a", function (event) < //отменяем стандартную обработку нажатия по ссылке event.preventDefault(); //забираем идентификатор бока с атрибута href var //узнаем высоту от начала страницы до блока на который ссылается якорь top = $(id).offset().top; //анимируем переход на расстояние - top за 1500 мс $('body,html').animate(, 1500); >); >);

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

Если это другая страница — то зачем вам скролл? Пусть сразу бросает на якорь. Лишние телодвижения в данном случае.

Проблема в том, что вам для начала надо ЧПУ на сайте реализовать. А там глядишь и скрипт заработает 🙂

Страница remstroigrupp.ru/kontaktyi прокрутите ее в самый низ, в подвале с правой стороны есть отзывы на имя можно кликнуть, ссылка ведет на страницу отзывы с якорем на нужной отзыв

п.с. сайт переделывается, на дизайн/не заполненные страницы и т.д. пока не смотрим =)

window.on('load', function() < var hash = location.hash; $('html, body').stop().animate(< scrollTop: $(hash).offset().top >, 1000); >);

ага и setTimeout нужно сюда крутить, т.к. без задержки после загрузки страницы эффекта не увидишь! Хотя тоже не уверен, так как ты переходишь по ссылке с якорем. Экспериментировать нужно

как вариант — elem.scrollIntoView()
но тут css transition не прикрутить

как вариант иммитируй скрол через translate контента относительно родительского контейнера
— но это тоже сомнительно, надо думать

Из-за того, что страница после загрузки сама мгновенно прокручивается к якорю, я делал такой хак: якорь задаётся скрытым тегом (с display: none) перед нужным блоком, тогда при переходе по этой ссылке положение страницы не меняется, а при загрузке к ней не прокручивается. А для плавной прокрутки после загрузки — чючють переделаный код от Bowen

$(window).on('load', function()< var top = $(window.location.hash+'+*').offset().top; $('html,body').stop().animate(< scrollTop: top >, 1000); >);

Кстати, можно и сначала на ready вызвать, а потом и на load, если есть вероятность, что из-за подгрузившихся картинок или скриптов блок может сдвинуться

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

Как сделать так чтобы, при отправки ajax события в data: < art: >, выходила два input и между ними &quot; — &quot;?

Источник