Плавный скролл после нажатия на якорную ссылку
Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с вами поправим.
Для того чтобы реализовать плавный переход после нажатия по ссылке, нам необходимо будет написать небольшой скрипт, который отследит момент нажатия, выяснит на какой блок ссылается якорь и плавно прокрутит страницу до нужного места. Но давайте обо всем по порядку 🙂
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);
});
});
Каждую строку скрипта я прокомментировал, если остались вопросы пиши в комментариях к посту - помогу 😉
(82 голосов. Рейтинг: 4,17 из 5)
Загрузка...Рубрика: jQuery, Как сделать?
Подписаться
Понравилась статья, подпишись и получи больше хорошего материала.
Спасибо, Дмитрий за статью!
Есть вопрос, от новичка: куда вставить код скрипта?
спасибо
Доброе утро!
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>
Если что-то осталось не ясным или не получилось, пишите!
Постараюсь ответить подробнее 🙂
Дмитрий, подскажите, а функцию плавности настроить можно как-то?
Вот в этом куске мы прописываем время перехода до нужного места
//анимируем переход на расстояние – top за 1500 мс
$(‘body,html’).animate({scrollTop: top}, 1500);
Но вы можете указать имя функции для анимации
.animate(properties, [duration], [easing], [callback])
Например:
$(‘body,html’).animate({scrollTop: top}, 1500, “linear”);
Более подробно можно почитать в документации к методу .animate();
Простите, мне немножко непонятно, там, где у вас комментарий: “узнаем высоту от начала страницы до блока на который ссылается якорь”.
Например, если расстояние 675 px, то куда их прописывать?
Я просто новичок в этом, не много не понимаю, не смогли бы вы подсказать…?(
Спасибо:) отличное решение, сегодня пригодилось!
Пожалуйста!
Рад, что пригодилось 🙂
Спасибо большое. Все сделал, все работает. Выручили:)
Добрый вечер! Сделал меню, прилипающее к верху страницы при прокрутке (не из Ваших уроков, а нашел другой скрипт раньше), затем по Вашему уроку сделал плавный переход к якорям. И тут возникла проблема – при переходе к якорной ссылки определенного абзаца – мое меню (т.к. он фиксировано) перекрывает часть контента своей высотой. Как вариант, мне пришла в голову идея сделать при прокрутке к якорю отступ от верхней части окна браузера до якоря на высоту меню (т.е. 60 пикс.) Но в скриптах пока не силен, поэтому прошу совета, как это можно реализовать. Сайт написал. Подключены две кнопки меню (О расчетном центре, Услуги). Очень прошу помощи. Заранее благодарю.
Все, я уже сам разобрался=)))
$(‘body,html’).animate({scrollTop: top-60}, 1500);
Рад, что получилось разобраться 🙂
Пишите если нужна будет помощь.
Спасибо Дмитрий за статью и скрипты и коды!!!
И спасибо за маленькое до-решение Максим!
Спасибо за ваш отзыв!
Всех благ! 🙂
Привет!
Можно ли использовать этот скрипт для сайта на 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
но мне кажется оно не работает из-за того что это старая версия
и вот эту
//code.jquery.com/jquery-1.11.3.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
Сложно что-то сказать не видя код перед глазами 🙂
//jsfiddle.net/7qr0qL87/
html – вот так выглядит стрелка вниз
css – это ее оформление
цель сделать js чтобы при нажатии на эту кнопку, body двигалась вниз на якорь
Просто продублируйте основную функцию из примера для вашей кнопки
Спасибо за скрипт! Очень помогло) Нужен он был не для красоты, а для того чтобы избавиться от неверного скролла до якоря (потому что меню наверху зафиксировано). Выставил в скрипте top-70 как писал парень выше и вуаля!
Но есть одно “но”. Скрипт не работает с id с пробелами. Есть список со ссылками на якоря, некоторые работают по скрипту, некоторые ведут себя стандартно. Как быть?) Id генерятся с подзаголовков статьи и делать с ними что-то на начальном уровне сложновато.
Есть варианты?)
Сам себе и отвечу) Поиск сделал не по 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);
});
Такая генерация id не верна, т.е. по сути раз у вас пробелы в гназвании, то это воспринимается как несколько идентификаторов для одного элемента, а это не верный подход, желательно исправить, например заменив пробелы на тире.
Я обошелся без id, в конце концов, код я написал. То, что айди не корректен, я согласен, его генерит редактор CKEditor и не хотелось что-то делать с этим.
Эй дарагой, спасиба бальщой, не только себе узнал как скрипт сайт ставить, но ещё и jQuэrry скачаль, раньше не зналь, что он за зверь такой!
Да продлит Аллах твои дни, вах спасиба!
Подскажи же, дарагой, а как сделать, щьтоб нижний ссылька “иди наверх” тоже плавно крутиль? Я и так пробоваль – и сяк пробоваль – вниз крутит вяло, а навэрх сразу шустро в один клац, шайтан!
Эй памаги да!
Вот эта статейка должна Вам помочь
Делаем кнопку «Наверх» для сайта
Если что пишите 🙂
Доброго дня!
Спасибо за скрипт, рулит!!!
Есть вопрос следующего характера, как его можно модифицировать (и можно ли?) если у меня на странице реализован переход по якорям в зависимости от значения выбранного в теге select?
То есть “стандартный” вариант перехода реализован следующим образом:
select onChange=”document.location.href=’#’+this.value”
Есть ли возможность в этом случае переход сделать плавным?
Заранее признателен.
Я так понял скрипт прописан непосредственно в разметке, вам его нужно вынести в отдельный файлик и прописать обработку для блока select, из него вытягиваете айдишник, а дальше как в статье обрабатываете переход
Скрипт в отдельном файле, но не в этом дело: я с jQuery “на “вы” и с глубоким поклоном” – понял как обработать переход, но уме не приложу как обработать select и вытянуть из него id… (((
id-шник вытянул, но не могу получить его отступ от начала страницы…
$(document).ready(function() {
$(“select”).change(function(){
var id = $(this).val();
alert(id); // выдает правильный id
alert($(id)); // выдает object Object (я так понимаю ссылка на объект)
alert($(id).offset().top); // не выдает ничего… (((
});
});
Хелп, плз, в чем может быть ошибка?
Продолжая традицию ответов “самому себе” конструкция заработала в следующем виде:
$(document).ready(function() {
$(“select”).change(function(){
var id = $(this).val(),
top = $(“#”+id).offset().top;
$(‘body,html’).animate({scrollTop: top}, 1000);
});
});
Есть подозрение что это “сильно криво”, но работает… =)
У меня совсем мало времени сейчас на блог остается, по-этому редко отвечаю, но в этом есть и свои плюсы у вас было время самостоятельно разобраться, что намного полезнее чем подсказка. Рад за вас! 🙂
Спасибо за блог, за то, что Вы хоть и редко, но отвечаете!
Искренне надеюсь что “совсем мало времени” компенсируется “очень много денег”, ну или других “приятностей”… 😉
Данный скрипт не работает в мозиле. Как его можно адаптировать?
Да, “отлично”, отменили стандартную обработку ссылки – получили ошибку при клике по стандартной ссылке, если такая есть в меню, а она есть. Как исправить этот неприятный момент?
Специально для Вас решение неприятного момента 🙂
//jsfiddle.net/webcomplex/43ry9bft/2/
Здравствуйте, такой вопрос (ранее поднимался в теме, но не было ответа):
сайт на Bootstap, ранее были различные реализации плавного скролла, но в Opera, Chrom, Яндекс-браузере не работает переход по якорям вообще. Может идёт конфликт в bootstrap.js – файле?
Здравствуйте!
Если бы у меня ссылки были вида ссылка, то плавный переход работал бы.
А у меня на сайте ссылки в меню генерируются только таким образом:
ссылка
ссылка
и никак иначе. Потому что в коде есть тег , он нужен для корректной работы CMS. Но в таком виде плавный переход по этим ссылкам не работает.
Подскажите, пожалуйста, как доработать скрипт для моей ситуации.
Спасибо.
Вот специально для Вас 🙂
Пример
Большое спасибо.
Пожалуйста 😉
Синяя кнопка не работает!!(
Простите, Вы о чем? )
Здравствуйте.Как и всем помог ваш скрипт,юзал уже раза три все было ок.
Но сейчас возникла проблема.При прокрутке страницы тупит на пол пути.и потом резко к якорю.
Спасибо!
Просто и эффективно.
Пожалуйста!
Здравствуйте!У меня фиксированное верхнее меню, мне нужно, что бы при нажатии и при скролле страницы ссылка меняла свой фоновый цвет находясь возле соответствующего блока. Подскажите пожалуйста как это реализовать? 🙂 Вот пример //dorokhova.com/index_en.html#layout
Классный скрипт. Спасибо!
Пожалуйста 🙂
Спасибо за Ваш отзыв!
Сделайте демо-примеры на отдельной странице как было раньше, а не как щас – в модальном окне. Сейчас исходный код демо в перемешку с общими стилями.
Жмем, правой кнопкой мышки над кнопкой “Демо”, в контекстном меню выбираем – “Открыть ссылку в новой вкладке” – профит 😉
Проблема такая: есть цикл с выводом ссылок, в зависимости от опции срабатывает несколько раз:
<a href="” class=”link”>
добавляю к нему ссылку на меню :
<a href="” class=”link”>
В таком случае анимация срабатывает только для первой ссылки.
Вопрос как ето исправить?)
Здравствуйте, мне на код в целом посмотреть, может ссылка на сайт или на jsfiddle.net залейте
Дмитрий подскажите пожалуйста, как можно реализовать плавный скролл не через id, а через class?
Благодарю за скорый ответ 🙂
Скорого ответа не получилось, но реализовать ваш вариант очень просто.
Достаточно прописать класс блоков в атрибут data-target для ссылок и просто вытягивать значение не с href а из data-target.
Здравствуйте!
Как сделать обратную откатку по кнопке “Вернуться к оглавлению”?
Добрый день, почитайте статью //webcomplex.com.ua/html/delaem-knopku-naverx-dlya-sajta.html
Доброго времени суток. отличная статья. Помогло! У меня вопрос. как сделать кнопку “далее”. например в лэндинг странице(обычно посередине, снизу экрана, стрелочка “вниз”). Скрипт сработал для прокрутки к каждому id в меню. но не работает для отдельной ссылки. То есть ссылка рабочая но скрипт не выходит вкрутить. Может ли кто то разобрать на пальцах? Спасибо.
Тут нужна ссылка на вашу страницу тогда смогу подсказать )
Я бы тоже не отказался от решения. Было бы неплохо написать в статье, как обращаться к конкретному элементу, а не всем ссылкам меню. Работает сейчас, если вместо #меню написать название блока, внутри которого ссылка, а вот как на ссылку отдельно направить скрпт, что-то не пойму.
Разобрался, убрать а в первой строчке $(“.block1_link”).on(“click”, function (event) {
Спасибо за статью.
Скрипт говно, переходы делает но заблокировал переходы по остальным ссылкам в блоке #menu
Значит нужно немного подредактировать скрипт для вашего случая
А как подредактировать? У меня та же история, скрипт подключил, но все остальные ссылки кроме этой работать перестали
Разобрался сам.
Закомментировал //event.preventDefault();
Т.е. отключил отключение стандартной обработки
Доброго времени суток, а как сделать что бы не по клику а допустим переход был сформирован автоматическим перенаправлением?
Спасибо, для частного случая сгодился без правок и допиливаний.
Спасибо автору ! Очень сильно люблю библиотеку Jquery за ее простоту и понятность !
Пожалуйста 🙂
Не работает скролл, можете взглянуть на код?
//jsfiddle.net/v8dmmmpv/
И еще skrollspy не пашет, на jsfiddle.net пашет
Нужно смотреть код той страницы, где он не работает
Кидайте ссылку 🙂
Проблему решил
У вас нет в разметке блока id = #menu, я поменял его на класс вашего блока навигации
//jsfiddle.net/v8dmmmpv/4/
Все работает 🙂
Разжуйте пожалуйста) Или кинте номер строки, где изменили код, заранее спасибо!
А… в JS… но блин, ничего не изменилось у меня, в jsfiddle все хорошо, а у меня нет((
Величайшее спасибо, проблема оказалась в неправильном путе к jQuery. Вы лучший!
Пожалуйста )))
Рад, что все у Вас получилось 🙂
Еще вопрос, не по теме, как сделать так, чтобы при открытии Modal(окна), оно закрывало(затемняло) навигационную панель
Спасибо бро, очень помог.
отличная статья, очень помогла. Спасибо вам большое.
Пожалуйста 🙂
Скажите пожалуйста а как на Joomla реализовать ?
Спасибо большое за скрипт с плавной прокруткой. В блогах на платформе блоггер прям перед скриптом подключайте jquery так и всё будет работать!
Ребята, а как сделать, чтобы при прокрутке к элементу, тот подсвечивался как-то, выделялся? Ну вот нажал на ссылку, тебя плавно подводит к нужному элементу и он визуально как то выделен уже, чтобы его сразу можно было увидеть.
Здравствуйте, подскажите пожалуйста. Поставил плагин WP-Comment-Master, он выводит постраничную пагинацию комментариев, все выводится отлично, но есть одно но – при клике по номеру для перехода на следующую страницу с комментариями, не работает скролинг, то есть принцип якоря, не докручивает страницу к началу комментариев. Что можно сделать? Я мог бы Вам на почту скинуть файлы плагина, посмотрели бы что к чему? В долгу не останусь.
Здравствуйте, Сергей!
Не могу обещать, что быстро посмотрю, но лучше скиньте ссылку на ваш сайт, так будет удобнее и быстрее.
Поблагодарить Вы и каждый может, через блок Яндекс.Деньги внизу каждой статьи. 🙂
Красиво, удобно, эффективно. Внес небольшое изменение в строке 13 –> $(‘body,html’).animate({scrollTop: top}, top);
Время промотки устанавливается, в зависимости от расстояния.
Можно добавить коэффициент, напр. top*1.1
Теперь прокручивается с одной скоростью, а то раньше вниз страницы проматывала, что в глазах рябило))
Круто, спасибо Вам! 🙂
При добавлении вашего скрипта, ошибка
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 не подскажите Как ее убрать. Так то все работает , просто в консоле не красиво)
Дмитрий, здравствуйте!
Я скачала 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);
});
});
странно, но весь код, кроме JavaScript был удалён в предыдущем комментарии. Может быть можно как-то отправить Вам HTML файл весь?
попробуйте выложить его на //jsfiddle.net
Вот более понятный вариант, все доступно, концепция ясна, вот только в JS не в зуб ногой, а на прошлом сайте говорили, что у них лучший вариант, а там просто пипец. Вот только есть вопрос, эту схему можно применить к кнопке возврата вверх?
Спасибо за ваш комментарий 🙂
По поводу вашего вопроса, почитайте вот этот пост:
Здравствуйте, а скажите, пожалуйста, как настроить эффект такой на мобильной версии? На десктопе все круто, но на мобильной версии не выходит так, прописал все айди для мобильного меню, но не работает( Надеюсь на помощь
Здравствуйте, Ярослав.
Дело в том, что код должен работать и на моб. устройствах.
Вы можете проверить это запустив пример из данной статьи у себя на телефоне или планшете.
Если вы дадите ссылку на ваш ресурс или покажете свой код, возможно, тогда я смогу вам как-то подсказать 🙂
//polynor2.digitalsystem.pro/
да, вот можете посмотреть, если, конечно, так что-то понятно будет)
Вот кусок кода для мобильных устройств. Обычное бутстраповское меню
Toggle navigation
<img src='’ alt = “logo”>
Обратныйзвонок
Все очень просто.
У вас на сайте фактически два меню: десктоп версия и мобильная версия.
У них разная разметка. Вы в скрипте подключаете только обработку одного меню #main.
Тот факт, что вы и для второго меню прописали такой же id, не поможет т.к. идентификатор должен иметь уникальное название и скрипт второй id уже не будет считывать.
Выход: вы можете обрабатывать оба меню по общему классу, например js-menu.
Добавьте этот класс к обоим меню и в js делайте выборку через него.
Успехов 🙂
Здравствуйте, прошу прощения за тупой вопрос. И все же, скачал библиотеку, вставил все по инструкции, но вот одного понять не могу какие манипуляции необходимо произвести с кодом? Нужно ли что-то где-то переименовать?
$(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);
});
});
Здравствуйте, Артем.
Да в данном коде мы используем идентификатор из разметки вашего меню, в примере id=”menu”, по-этому далее в скрипте мы пишем $(«#menu»).on(«click»,»a», function (event) { … });
Обратите на это внимание, возможно у вас здесь идет не состыковка 🙂
Добрый день! А подскажите, у меня эта ссылка открывает еще таб ( в бутстрапе) который в данным момент не активен. И получается так, что первый раз жму на по ссылке, она открывает контент, он появляется, но скролла нет. Второй раз кликаю по ссылке идет скролл. Как сделать, чтобы появлялся контент и потом сразу шел скролл?
Мне сложно вам что-то сказать, дайте ссылку на ваш ресурс, я посмотрю код и возможно смогу что-то подсказать
//safe-charge.ru/razmestit-reklamu
внизу жмете на картинку “реклама в автосервисе”
Сейчас у вас при клике на картинку происходит два события:
1. Появляется блок с описанием
2. Должен идти плавный переход
Не работает потому что срабатывает скрипт перехода, до того как элемент отобразился.
Т.е. вы пыаетесь перейти к элементу которого еще нет на странице, а когда клацаете второй раз – все уже ОК 🙂
Вам нужно сделать один обработчик и в нем сначала отобразить описание, а потом запустить скрипт плавного перехода
Да это я понял) а как это сделать, вот вопрос? я то не силен в js(( могу тока прикрутить куда нибудь и все( а мне позарез нужна эта фича.
Попробуйте поставить вот этот код, он отлаживает выполнение скрола на некоторое время, чего должно хватить 🙂
$("#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);
});
Как отобразить ссылку на якорь в адресной строке?
Спасибо!
Пожалуйста 🙂
Здравствуйте Дмитрий!
Что я делаю не так? Поставил якорь в тексте и сделал ссылку на него текст Скачком переход есть. Делаю плавный. Загрузил последние 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;
});
});
Почему не получается плавная прокрутка?
В идеале киньте ссылку на живой пример 🙂
А так попробуйте проанализировать и упростить ваш код.
Например, замените проверку браузера на одну строку $(‘body,html’).animate({scrollTop: destination}, 1100);
Спасибо вам большое,спустя столько лет вашей публикации и все работает ,очень ясно и просто все написано.Очень пригодилась!!!!!
Пожалуйста! Рад, что помогло 🙂
Дмитрий, добрый день! А как осуществить переход по ссылке с прокруткой к якорю? Просто получается, если меню выводится на всех страницах сайта, я нахожусь на внутренней странице, а данный id есть только на главной, то при нажатии на ссылку само собой ничего не происходит.
Ссылка такого вида например: /#about-us
Либо просто полный путь: //my-site.com/#about-us
Можете попробовать скриптом обрабатывать переход по таким ссылкам, вот как вариант, код ниже:
(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);
}
В самом начале страницы у автора ошибка в скрипте
top = $(id).offset().top; Не правильно! Надо так:
var top = $(id).offset().top;
Спасибо Вам за ваш комментарий!
Посмотрел, свой код. Там идет объявление переменных через запятую
var a, b, c;
Но можно и так:
var a;
var b;
var c;
Честно говоря сейчас я придерживаюсь второго варианта написания каждой переменной с новой строки и нового синтаксиса с использованием let вместо var.
Отлично и полезно. Работает как с id, так и с class. Если можно, подскажите, как от этой высчитанной высоты отнимать высоту фиксированного меню, а то оно верхнюю часть блока, на который переходишь, закрывает?
Всем привет! А можно сделать плавный скролл страницы, не прибегая к фреймворку jQuery? Или хотя бы не подключая дополнительных библиотек, вроде jQuery UI???
День убил на поиски нужного кода, нашел его у вас.
//jsfiddle.net/webcomplex/43ry9bft/3/ – именно с поправкой на ветер для ссылок, которые генерит CMS
Спасибо огромное!
Я не знаю 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) {
Что мне исправить?
Здравствуйте, очень понравилась статья и вроде всё работает, но вот за исключением анимации перехода. Видите ли я лишь познаю JS и могу ошибаться, но я делал всё по инструкции, а браузер Браузер Chrome (последней стабильной версии) банально игнорирует анимацию, не могли бы подсказать, в чем может заключаться делема?
Добрый день. Дайте пожалуйста ссылку на ваш ресур, где бы я мог посмотреть ваш код.
Добрый день, а подскажите как сделать это для внутренних страниц сайта? ибо так переводит на главную и ничего не срабатывает.
Не работает совершенно
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)
У вас, ошибка в коде.
Если дадите ссылку на сайт с кодом, могу глянуть.
Добрый день.Подскажите пожалуйста по такому вопросу.
Что если один из пунктов меню является ссылкой на другу страницу, в моем случае блог.
В таком случае код будет выглядеть так:
02
03
Link #1
04
Link #2
05
Link #3
06
БЛОГ
07
08
Но при нажатии на “БЛОГ” у меня не происходит переход на страницу “БЛОГ”
Но если же прописать:
тогда при нажатии будет переход на “БЛОГ”, но не будет плавного перехода по остальным строчкам наглавной.
БУду очень благодарен за ответ.
Добрый день.
Вот код для ссылок на другие страницы и внутренние блоки главной //jsfiddle.net/webcomplex/43ry9bft/2/
А этот вариант такой же, только позволяет обрабатывать ссылки на внутренние блоки других страниц
//jsfiddle.net/webcomplex/43ry9bft/3/
Огонь, робит, спасибо!
Здравствуйте , не работает когда подключаю Jquery plugin fullpage.js ,кажется из за стиля (overflow: hidden) родительского блока?
Добрый день, думаю вам достаточно будет работать в рамках fullpage.js.
Почитайте этот ответ, думаю он вам поможет //goo.gl/XAMc5n
Большое спасибо, очень помогло! Правда пришлось чуть доделать иначе не хотела анимация работать. Добавил var перед назначением top и заменил html и body на div. Может кому тоже поможет. А так, супер!