Плавный скролл после нажатия на якорную ссылку

Каждая ссылка ссылается на соответствующий блок:

Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.

Каждую строку скрипта я прокомментировал, если остались вопросы пиши в комментариях к посту – помогу 😉

151 thoughts on “ Плавный скролл после нажатия на якорную ссылку ”

Спасибо, Дмитрий за статью! Есть вопрос, от новичка: куда вставить код скрипта?

Доброе утро! 1. Вам нужно подключить библиотеку jQuery, как это сделать я описал в этом посте: Подключаем библиотеку jQuery к своему проекту 2.1. Код скрипта можно сохранить в отдельный файл, например script.js. Если этот файл сохранен в одной папке с файлом index.html, то в теге head вам нужно прописать такую строку: <script type="text/javascript" src="https://webcomplex.com.ua/jquery/script.js"></script> 2.2 Если вы не хотите сохранять код скрипта в отдельный файл, вы можете добавить его в конце страницы перед закрывающимся тегом <script type="text/javascript"> $(document).ready(function() ); >); </script> </body>

Если что-то осталось не ясным или не получилось, пишите! Постараюсь ответить подробнее 🙂

Дмитрий, подскажите, а функцию плавности настроить можно как-то?

Вот в этом куске мы прописываем время перехода до нужного места //анимируем переход на расстояние – top за 1500 мс $(‘body,html’).animate(, 1500);

Но вы можете указать имя функции для анимации .animate(properties, [duration], [easing], [callback])

Более подробно можно почитать в документации к методу .animate();

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

Например, если расстояние 675 px, то куда их прописывать? Я просто новичок в этом, не много не понимаю, не смогли бы вы подсказать…?(

Спасибо:) отличное решение, сегодня пригодилось!

Пожалуйста! Рад, что пригодилось 🙂

Спасибо большое. Все сделал, все работает. Выручили:)

Добрый вечер! Сделал меню, прилипающее к верху страницы при прокрутке (не из Ваших уроков, а нашел другой скрипт раньше), затем по Вашему уроку сделал плавный переход к якорям. И тут возникла проблема – при переходе к якорной ссылки определенного абзаца – мое меню (т.к. он фиксировано) перекрывает часть контента своей высотой. Как вариант, мне пришла в голову идея сделать при прокрутке к якорю отступ от верхней части окна браузера до якоря на высоту меню (т.е. 60 пикс.) Но в скриптах пока не силен, поэтому прошу совета, как это можно реализовать. Сайт написал. Подключены две кнопки меню (О расчетном центре, Услуги). Очень прошу помощи. Заранее благодарю.

Рад, что получилось разобраться 🙂 Пишите если нужна будет помощь.

Спасибо Дмитрий за статью и скрипты и коды.

И спасибо за маленькое до-решение Максим!

Спасибо за ваш отзыв! Всех благ! 🙂

Привет! Можно ли использовать этот скрипт для сайта на Joomla?

Сделал все как в демо. Но плавный переход не работает почему-то. Сайт сделал на Bootstrap. Подскажите пожалуйста почему не срабатывает?

Здравствуйте, есть сайт на котором много товаров и если опуститься к нижнему товару и нажать на ссылку пользователь остается внизу страницы (тоесть нужного товара не видно). Можно ли сделать так что бы его бросало в нужную часть сайта (к якорю). Заранее спасибо.

Не понял вашу ситуацию. Может дадите ссылку, где можно посмотреть )

Здравствуйте. Подскажите, а как сделать плавный переход к якорю, который расположен на другой странице сайта, а не на этой же? Спасибо.

Здравствуйте. Добавил данный скролл для другого меню, но он не работает, а именно идет конфликт на “a href”. Кода в скрипте убираю “a” то она просто переходит, без плавного скролла. Когда оставляю все как в примере то он вообще не переходит по ссылкам.

Здравствуйте. Возможно у вас нет идентификаторов с тем названием которое прописано в атрибуте href для ссылки? Идеальный вариант чтобы вы дали мне ссылку на ваш пример или часть html кода 🙂

Здравствуйте, ваш скрипт отлично работает, но у меня возник вопрос, а почему когда подключаешь jQuery из файлика все работает, а если с гугла, то скрипт не работает? Заранее спасибо 😉

А еще хотел бы дополнить тем, что с версией jquery-1.11.3.min тоже не работает? =( Что я делаю не так?

Сложно сказать … Нужно смотреть ваш пример и что выдает консоль … Посмотрите мой код на jsfiddle ( //jsfiddle.net/webcomplex/43ry9bft/ ) и выложите свой вариант, посмотрим 🙂

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

Рад, что разобрались 🙂

Здравствуйте, Данил! Укажите, пожалуйста, путь к гугл библиотеке jQuery, чтобы я мог проверить 🙂

я добавлял вот эту //ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js но мне кажется оно не работает из-за того что это старая версия и вот эту

С этой библиотекой все должно работать, возможно у вас есть ошибка или проблема еще в чем-то, мне бы код или ссылку на ваш пример )

Вот тут 3 скрина, с моим кодом. Вкратце опишу: у меня есть 2 файлика js которые я подключаю, ну и 1 скрипт в самом коде html страницы. //yadi.sk/i/d_IUlFA1iUKzL //yadi.sk/i/WBPuLbOiiUL5W //yadi.sk/i/Jp2ChVVAiUKyj

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

Выложите ваш код на jsfiddle.net или дайте ссылку на ваш сайт или текст ошибки в консоли 🙂

Подскажите пожалуйста, как сделать, что б после перехода на якорь в адресной строке указывался к нему путь site.com/#ex1?

Попробуйте убрать вот эту строку из кода event.preventDefault();

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

Здравствуйте, дайте ссылку на ваш сайт или выложите код на //jsfiddle.net Сложно что-то сказать не видя код перед глазами 🙂

html – вот так выглядит стрелка вниз css – это ее оформление

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

Просто продублируйте основную функцию из примера для вашей кнопки

Спасибо за скрипт! Очень помогло) Нужен он был не для красоты, а для того чтобы избавиться от неверного скролла до якоря (потому что меню наверху зафиксировано). Выставил в скрипте top-70 как писал парень выше и вуаля! Но есть одно “но”. Скрипт не работает с id с пробелами. Есть список со ссылками на якоря, некоторые работают по скрипту, некоторые ведут себя стандартно. Как быть?) Id генерятся с подзаголовков статьи и делать с ними что-то на начальном уровне сложновато. Есть варианты?)

Сам себе и отвечу) Поиск сделал не по id а по name. Получилось так:

$(“#menu”).on(“click”, “a”, function (event) id.length); //Первый символ – решетка не нужен. var name = (“#article a[name='” + id + “‘]”); //нашел ту самую ссылку, с атрибутом name равным искомому. Дальше все стандартно var top = $(name).offset().top; $(‘body,html’).animate(, 1000); >);

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

Я обошелся без id, в конце концов, код я написал. То, что айди не корректен, я согласен, его генерит редактор CKEditor и не хотелось что-то делать с этим.

Эй дарагой, спасиба бальщой, не только себе узнал как скрипт сайт ставить, но ещё и jQuэrry скачаль, раньше не зналь, что он за зверь такой!

Да продлит Аллах твои дни, вах спасиба!

Подскажи же, дарагой, а как сделать, щьтоб нижний ссылька “иди наверх” тоже плавно крутиль? Я и так пробоваль – и сяк пробоваль – вниз крутит вяло, а навэрх сразу шустро в один клац, шайтан!

Вот эта статейка должна Вам помочь Делаем кнопку «Наверх» для сайта Если что пишите 🙂

Доброго дня! Спасибо за скрипт, рулит. Есть вопрос следующего характера, как его можно модифицировать (и можно ли?) если у меня на странице реализован переход по якорям в зависимости от значения выбранного в теге select?

То есть “стандартный” вариант перехода реализован следующим образом: select Есть ли возможность в этом случае переход сделать плавным? Заранее признателен.

Я так понял скрипт прописан непосредственно в разметке, вам его нужно вынести в отдельный файлик и прописать обработку для блока select, из него вытягиваете айдишник, а дальше как в статье обрабатываете переход

Скрипт в отдельном файле, но не в этом дело: я с jQuery “на “вы” и с глубоким поклоном” – понял как обработать переход, но уме не приложу как обработать select и вытянуть из него id… (((

id-шник вытянул, но не могу получить его отступ от начала страницы…

$(document).ready(function() ); >);

Хелп, плз, в чем может быть ошибка?

Продолжая традицию ответов “самому себе” конструкция заработала в следующем виде: $(document).ready(function() ); >);

Есть подозрение что это “сильно криво”, но работает… =)

У меня совсем мало времени сейчас на блог остается, по-этому редко отвечаю, но в этом есть и свои плюсы у вас было время самостоятельно разобраться, что намного полезнее чем подсказка. Рад за вас! 🙂

Спасибо за блог, за то, что Вы хоть и редко, но отвечаете! Искренне надеюсь что “совсем мало времени” компенсируется “очень много денег”, ну или других “приятностей”… 😉

Данный скрипт не работает в мозиле. Как его можно адаптировать?

Да, “отлично”, отменили стандартную обработку ссылки – получили ошибку при клике по стандартной ссылке, если такая есть в меню, а она есть. Как исправить этот неприятный момент?

Специально для Вас решение неприятного момента 🙂 //jsfiddle.net/webcomplex/43ry9bft/2/

Здравствуйте, такой вопрос (ранее поднимался в теме, но не было ответа): сайт на Bootstap, ранее были различные реализации плавного скролла, но в Opera, Chrom, Яндекс-браузере не работает переход по якорям вообще. Может идёт конфликт в bootstrap.js – файле?

Здравствуйте! Если бы у меня ссылки были вида ссылка, то плавный переход работал бы. А у меня на сайте ссылки в меню генерируются только таким образом: ссылка ссылка и никак иначе. Потому что в коде есть тег , он нужен для корректной работы CMS. Но в таком виде плавный переход по этим ссылкам не работает. Подскажите, пожалуйста, как доработать скрипт для моей ситуации. Спасибо.