jQuery как сделать?

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

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

1. Структура меню с якорными ссылками

Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока <div id=”main”>…</div>, внутренняя ссылка на этот блок будет иметь следующий вид: <a href=”#main”></a>
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:

<nav id="menu">
	<ul>
		<li><a href="#ex1">Link #1</a></li>
		<li><a href="#ex2">Link #2</a></li>
		<li><a href="#ex3">Link #3</a></li>
		<li><a href="#ex4">Link #4</a></li>
	</ul>
</nav>

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

<div id="content">
	<section id="ex1">
		...
	</section>
	<div class="separator"></div>
	<section id="ex2">
		...
	</section>
	<div class="separator"></div>
	<section id="ex3">
		...
	</section>
	<div class="separator"></div>
	<section id="ex4">
		...
	</section>
</div>

2. Скрипт плавного перехода к нужному блоку

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

 
$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		//отменяем стандартную обработку нажатия по ссылке
		event.preventDefault();

		//забираем идентификатор бока с атрибута href
		var id  = $(this).attr('href'),

		//узнаем высоту от начала страницы до блока на который ссылается якорь
			top = $(id).offset().top;
		
		//анимируем переход на расстояние - top за 1500 мс
		$('body,html').animate({scrollTop: top}, 1500);
	});
});

 

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

(50 голосов. Рейтинг: 4,36 из 5)
Загрузка...

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

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

    спасибо

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

      <script type="text/javascript">
      $(document).ready(function(){
      $("#menu").on("click","a", function (event) {
      //отменяем стандартную обработку нажатия по ссылке
      event.preventDefault();

      //забираем идентификатор бока с атрибута href
      var id = $(this).attr('href'),

      //узнаем высоту от начала страницы до блока на который ссылается якорь
      top = $(id).offset().top;

      //анимируем переход на расстояние - top за 1500 мс
      $('body,html').animate({scrollTop: top}, 1500);
      });
      });
      </script>
      </body>

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

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

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

          Например:
          $(‘body,html’).animate({scrollTop: top}, 1500, “linear”);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Эй памаги да!

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

    То есть “стандартный” вариант перехода реализован следующим образом:
    select onChange=”document.location.href=’#’+this.value”
    Есть ли возможность в этом случае переход сделать плавным?
    Заранее признателен.

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

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

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

        $(document).ready(function() {
        $(“select”).change(function(){
        var id = $(this).val();
        alert(id); // выдает правильный id
        alert($(id)); // выдает object Object (я так понимаю ссылка на объект)
        alert($(id).offset().top); // не выдает ничего… (((
        });
        });

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

      3. Продолжая традицию ответов “самому себе” конструкция заработала в следующем виде:
        $(document).ready(function() {
        $(“select”).change(function(){
        var id = $(this).val(),
        top = $(“#”+id).offset().top;
        $(‘body,html’).animate({scrollTop: top}, 1000);
        });
        });

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

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

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

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

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

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

  16. Здравствуйте.Как и всем помог ваш скрипт,юзал уже раза три все было ок.
    Но сейчас возникла проблема.При прокрутке страницы тупит на пол пути.и потом резко к якорю.

  17. Здравствуйте!У меня фиксированное верхнее меню, мне нужно, что бы при нажатии и при скролле страницы ссылка меняла свой фоновый цвет находясь возле соответствующего блока. Подскажите пожалуйста как это реализовать? 🙂 Вот пример http://dorokhova.com/index_en.html#layout

  18. Сделайте демо-примеры на отдельной странице как было раньше, а не как щас – в модальном окне. Сейчас исходный код демо в перемешку с общими стилями.

    1. Жмем, правой кнопкой мышки над кнопкой “Демо”, в контекстном меню выбираем – “Открыть ссылку в новой вкладке” – профит 😉

  19. Проблема такая: есть цикл с выводом ссылок, в зависимости от опции срабатывает несколько раз:
    <a href="” class=”link”>

    добавляю к нему ссылку на меню :

    <a href="” class=”link”>

    В таком случае анимация срабатывает только для первой ссылки.
    Вопрос как ето исправить?)

    1. Здравствуйте, мне на код в целом посмотреть, может ссылка на сайт или на jsfiddle.net залейте

  20. Дмитрий подскажите пожалуйста, как можно реализовать плавный скролл не через id, а через class?

    Благодарю за скорый ответ 🙂

    1. Скорого ответа не получилось, но реализовать ваш вариант очень просто.
      Достаточно прописать класс блоков в атрибут data-target для ссылок и просто вытягивать значение не с href а из data-target.

  21. Здравствуйте!

    Как сделать обратную откатку по кнопке “Вернуться к оглавлению”?

  22. Доброго времени суток. отличная статья. Помогло! У меня вопрос. как сделать кнопку “далее”. например в лэндинг странице(обычно посередине, снизу экрана, стрелочка “вниз”). Скрипт сработал для прокрутки к каждому id в меню. но не работает для отдельной ссылки. То есть ссылка рабочая но скрипт не выходит вкрутить. Может ли кто то разобрать на пальцах? Спасибо.

      1. Я бы тоже не отказался от решения. Было бы неплохо написать в статье, как обращаться к конкретному элементу, а не всем ссылкам меню. Работает сейчас, если вместо #меню написать название блока, внутри которого ссылка, а вот как на ссылку отдельно направить скрпт, что-то не пойму.

        1. Разобрался, убрать а в первой строчке $(“.block1_link”).on(“click”, function (event) {
          Спасибо за статью.

  23. Скрипт говно, переходы делает но заблокировал переходы по остальным ссылкам в блоке #menu

    1. Значит нужно немного подредактировать скрипт для вашего случая

      1. А как подредактировать? У меня та же история, скрипт подключил, но все остальные ссылки кроме этой работать перестали

        1. Разобрался сам.
          Закомментировал //event.preventDefault();
          Т.е. отключил отключение стандартной обработки

  24. Доброго времени суток, а как сделать что бы не по клику а допустим переход был сформирован автоматическим перенаправлением?

      1. Нужно смотреть код той страницы, где он не работает
        Кидайте ссылку 🙂

      1. Разжуйте пожалуйста) Или кинте номер строки, где изменили код, заранее спасибо!

      2. А… в JS… но блин, ничего не изменилось у меня, в jsfiddle все хорошо, а у меня нет((

      3. Величайшее спасибо, проблема оказалась в неправильном путе к jQuery. Вы лучший!

  25. Еще вопрос, не по теме, как сделать так, чтобы при открытии Modal(окна), оно закрывало(затемняло) навигационную панель

  26. Спасибо большое за скрипт с плавной прокруткой. В блогах на платформе блоггер прям перед скриптом подключайте jquery так и всё будет работать!

  27. Ребята, а как сделать, чтобы при прокрутке к элементу, тот подсвечивался как-то, выделялся? Ну вот нажал на ссылку, тебя плавно подводит к нужному элементу и он визуально как то выделен уже, чтобы его сразу можно было увидеть.

  28. Здравствуйте, подскажите пожалуйста. Поставил плагин WP-Comment-Master, он выводит постраничную пагинацию комментариев, все выводится отлично, но есть одно но – при клике по номеру для перехода на следующую страницу с комментариями, не работает скролинг, то есть принцип якоря, не докручивает страницу к началу комментариев. Что можно сделать? Я мог бы Вам на почту скинуть файлы плагина, посмотрели бы что к чему? В долгу не останусь.

    1. Здравствуйте, Сергей!
      Не могу обещать, что быстро посмотрю, но лучше скиньте ссылку на ваш сайт, так будет удобнее и быстрее.

      Поблагодарить Вы и каждый может, через блок Яндекс.Деньги внизу каждой статьи. 🙂

  29. Красиво, удобно, эффективно. Внес небольшое изменение в строке 13 –> $(‘body,html’).animate({scrollTop: top}, top);
    Время промотки устанавливается, в зависимости от расстояния.
    Можно добавить коэффициент, напр. top*1.1
    Теперь прокручивается с одной скоростью, а то раньше вниз страницы проматывала, что в глазах рябило))

  30. При добавлении вашего скрипта, ошибка
    Uncaught TypeError: Cannot read property ‘top’ of undefined
    at HTMLAnchorElement. (index.html:739)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
    в этой строке
    top = $(id).offset().top;

    Это происходит при клике на ссылку в меню не имеющей якоря, она у меня вызывает drop down menu не подскажите Как ее убрать. Так то все работает , просто в консоле не красиво)

  31. Дмитрий, здравствуйте!
    Я скачала jQuery, как было описано в Вашей статье, и всё прикрепила, но всё равно плавный переход не работает. Ниже прикрепляю свой код, может быть Вы найдётё ошибку. Заранее благодарю Вас!

    Das Land meiner Art

    Malerei



    Fotogalerie



    Das Land meiner Art



    $(document).ready(function(){
    $(“#menu”).on(“click”,”a”, function (event) {
    //отменяем стандартную обработку нажатия по ссылке
    event.preventDefault();

    //забираем идентификатор бока с атрибута href
    var id = $(this).attr(‘href’),

    //узнаем высоту от начала страницы до блока на который ссылается якорь
    top = $(id).offset().top;

    //анимируем переход на расстояние – top за 1500 мс
    $(‘body,html’).animate({scrollTop: top}, 1500);
    });
    });

    1. странно, но весь код, кроме JavaScript был удалён в предыдущем комментарии. Может быть можно как-то отправить Вам HTML файл весь?

  32. Вот более понятный вариант, все доступно, концепция ясна, вот только в JS не в зуб ногой, а на прошлом сайте говорили, что у них лучший вариант, а там просто пипец. Вот только есть вопрос, эту схему можно применить к кнопке возврата вверх?

    1. Спасибо за ваш комментарий 🙂
      По поводу вашего вопроса, почитайте вот этот пост:

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

    1. Здравствуйте, Ярослав.
      Дело в том, что код должен работать и на моб. устройствах.
      Вы можете проверить это запустив пример из данной статьи у себя на телефоне или планшете.
      Если вы дадите ссылку на ваш ресурс или покажете свой код, возможно, тогда я смогу вам как-то подсказать 🙂

        1. Все очень просто.
          У вас на сайте фактически два меню: десктоп версия и мобильная версия.
          У них разная разметка. Вы в скрипте подключаете только обработку одного меню #main.
          Тот факт, что вы и для второго меню прописали такой же id, не поможет т.к. идентификатор должен иметь уникальное название и скрипт второй id уже не будет считывать.

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

          Успехов 🙂

  34. Здравствуйте, прошу прощения за тупой вопрос. И все же, скачал библиотеку, вставил все по инструкции, но вот одного понять не могу какие манипуляции необходимо произвести с кодом? Нужно ли что-то где-то переименовать?

    $(document).ready(function(){
    $(“#menu”).on(“click”,”a”, function (event) {
    //отменяем стандартную обработку нажатия по ссылке
    event.preventDefault();

    //забираем идентификатор бока с атрибута href
    var id = $(this).attr(‘href’),

    //узнаем высоту от начала страницы до блока на который ссылается якорь
    top = $(id).offset().top;

    //анимируем переход на расстояние – top за 1500 мс
    $(‘body,html’).animate({scrollTop: top}, 1500);
    });
    });

    1. Здравствуйте, Артем.
      Да в данном коде мы используем идентификатор из разметки вашего меню, в примере id=”menu”, по-этому далее в скрипте мы пишем $(«#menu»).on(«click»,»a», function (event) { … });

      Обратите на это внимание, возможно у вас здесь идет не состыковка 🙂

  35. Добрый день! А подскажите, у меня эта ссылка открывает еще таб ( в бутстрапе) который в данным момент не активен. И получается так, что первый раз жму на по ссылке, она открывает контент, он появляется, но скролла нет. Второй раз кликаю по ссылке идет скролл. Как сделать, чтобы появлялся контент и потом сразу шел скролл?

    1. Мне сложно вам что-то сказать, дайте ссылку на ваш ресурс, я посмотрю код и возможно смогу что-то подсказать

        1. Сейчас у вас при клике на картинку происходит два события:
          1. Появляется блок с описанием
          2. Должен идти плавный переход
          Не работает потому что срабатывает скрипт перехода, до того как элемент отобразился.
          Т.е. вы пыаетесь перейти к элементу которого еще нет на странице, а когда клацаете второй раз – все уже ОК 🙂

          Вам нужно сделать один обработчик и в нем сначала отобразить описание, а потом запустить скрипт плавного перехода

          1. Да это я понял) а как это сделать, вот вопрос? я то не силен в js(( могу тока прикрутить куда нибудь и все( а мне позарез нужна эта фича.

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

            $("#12").on("click", "a", function(event) {
            event.preventDefault();
            var $item = $(this);
            setTimeout(function() {
            var id = $item.attr('href'),
            top = $(id).offset().top;
            $('body,html').animate({
            scrollTop: top
            }, 600);
            }, 100);
            });

  36. Здравствуйте Дмитрий!
    Что я делаю не так? Поставил якорь в тексте и сделал ссылку на него текст Скачком переход есть. Делаю плавный. Загрузил последние jquery-3.2.1.min.js и jquery-3.2.1.slim.min.js с оф.сайта, поместил их рядом с index.php, в index.php прописал между следующее:

    $(document).ready(function() {
    $(‘a[href^=”#”]’).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;
    });
    });

    Почему не получается плавная прокрутка?

    1. В идеале киньте ссылку на живой пример 🙂
      А так попробуйте проанализировать и упростить ваш код.
      Например, замените проверку браузера на одну строку $(‘body,html’).animate({scrollTop: destination}, 1100);

  37. Спасибо вам большое,спустя столько лет вашей публикации и все работает ,очень ясно и просто все написано.Очень пригодилась!!!!!

  38. Дмитрий, добрый день! А как осуществить переход по ссылке с прокруткой к якорю? Просто получается, если меню выводится на всех страницах сайта, я нахожусь на внутренней странице, а данный id есть только на главной, то при нажатии на ссылку само собой ничего не происходит.
    Ссылка такого вида например: /#about-us
    Либо просто полный путь: https://my-site.com/#about-us

    1. Можете попробовать скриптом обрабатывать переход по таким ссылкам, вот как вариант, код ниже:

      (function(){
      $('.menu').on('click','a', function(e){
      e.preventDefault();

      var $link = $(this);
      var href = $link.attr('href');
      href = ( href.split('#')[0] != '' )? href : window.location.origin + '/' + href;

      if ( href.includes('#') && isCurrentPage(href) ){
      scrollToSection(href);
      } else {
      window.location.href = href;
      }

      });
      })();

      function isCurrentPage(link){
      var currentUrl = window.location.origin + window.location.pathname;

      if ( currentUrl === link.split('#')[0] ){
      return true;
      }

      return false;
      }

      function scrollToSection(hashLink){
      var headerHeight = $('.header').height();
      var id = '#' + hashLink.split('#')[1];
      console.log(id);
      var top = $(id).offset().top - headerHeight;

      $('body,html').animate({scrollTop: top}, 1500);
      }

  39. В самом начале страницы у автора ошибка в скрипте
    top = $(id).offset().top; Не правильно! Надо так:
    var top = $(id).offset().top;

    1. Спасибо Вам за ваш комментарий!
      Посмотрел, свой код. Там идет объявление переменных через запятую
      var a, b, c;
      Но можно и так:
      var a;
      var b;
      var c;

      Честно говоря сейчас я придерживаюсь второго варианта написания каждой переменной с новой строки и нового синтаксиса с использованием let вместо var.

  40. Отлично и полезно. Работает как с id, так и с class. Если можно, подскажите, как от этой высчитанной высоты отнимать высоту фиксированного меню, а то оно верхнюю часть блока, на который переходишь, закрывает?

  41. Всем привет! А можно сделать плавный скролл страницы, не прибегая к фреймворку jQuery? Или хотя бы не подключая дополнительных библиотек, вроде jQuery UI???

  42. Я не знаю JavaScript и разбираюсь только в html. Вот у меня возникла потребность создать хороший якорь. Зашел сюда, далее – стандартные действия (Ctrl+C & Ctrl+V) и вот у меня Brackets говорит, что что-то не так.
    1
    ‘$’ was used before it was defined. $(document).ready(function(){
    1
    Expected exactly one space between ‘function’ and ‘(‘. $(document).ready(function(){
    1
    Expected exactly one space between ‘)’ and ‘{‘. $(document).ready(function(){
    1
    Missing space between ‘)’ and ‘{‘. $(document).ready(function(){
    3
    Missing ‘use strict’ statement. $(“#menu”).on(“click”,”a”, function (event) {
    3
    Missing space between ‘,’ and ‘a’. $(“#menu”).on(“click”,”a”, function (event) {
    Что мне исправить?

  43. Здравствуйте, очень понравилась статья и вроде всё работает, но вот за исключением анимации перехода. Видите ли я лишь познаю JS и могу ошибаться, но я делал всё по инструкции, а браузер Браузер Chrome (последней стабильной версии) банально игнорирует анимацию, не могли бы подсказать, в чем может заключаться делема?

    1. Добрый день. Дайте пожалуйста ссылку на ваш ресур, где бы я мог посмотреть ваш код.

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

  45. Не работает совершенно

    Uncaught Error: Syntax error, unrecognized expression: #order
    at Function.db.error (jquery-1.11.0.min.js:2)
    at ob (jquery-1.11.0.min.js:2)
    at xb (jquery-1.11.0.min.js:2)
    at Function.db [as find] (jquery-1.11.0.min.js:2)
    at n.fn.init.find (jquery-1.11.0.min.js:2)
    at new n.fn.init (jquery-1.11.0.min.js:2)
    at n (jquery-1.11.0.min.js:2)
    at HTMLAnchorElement. (a5b-script.js:12)
    at HTMLAnchorElement.dispatch (jquery-1.11.0.min.js:3)
    at HTMLAnchorElement.r.handle (jquery-1.11.0.min.js:3)

    1. У вас, ошибка в коде.
      Если дадите ссылку на сайт с кодом, могу глянуть.

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

    02

    03
    Link #1
    04
    Link #2
    05
    Link #3
    06
    БЛОГ
    07

    08

    Но при нажатии на “БЛОГ” у меня не происходит переход на страницу “БЛОГ”
    Но если же прописать:

    тогда при нажатии будет переход на “БЛОГ”, но не будет плавного перехода по остальным строчкам наглавной.

    БУду очень благодарен за ответ.

  47. Здравствуйте , не работает когда подключаю Jquery plugin fullpage.js ,кажется из за стиля (overflow: hidden) родительского блока?

Добавить комментарий для Guest Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *