Плавный переход к якорю
Как правило при создании посадочных страниц (landing pages), на них размещается довольно много информации. На таких сайтах плавный скроллинг к его секциям придаст оформлению еще большую привлекательность.
Для примера сделаем простенькую разметку:
[codepen_embed height=”266″ theme_id=”light” slug_hash=”PNyxwO” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/PNyxwO/’>PNyxwO</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Как видите при клике по ссылкам происходят скачки, что не очень красиво. Для того, чтобы все происходило плавно напишем небольшой jQuery код (не забудьте подключить саму библиотеку). Итак нам нужно обработать нажатия по ссылкам, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.
$(function(){
$('a[href^="#"]').on('click', function(event) {
// отменяем стандартное действие
event.preventDefault();
var sc = $(this).attr("href"),
dn = $(sc).offset().top;
/*
* sc - в переменную заносим информацию о том, к какому блоку надо перейти
* dn - определяем положение блока на странице
*/
$('html, body').animate({scrollTop: dn}, 1000);
/*
* 1000 скорость перехода в миллисекундах
*/
});
});
В комментариях к коду я постарался объяснить за что он делает. И вот результат:
[codepen_embed height=”266″ theme_id=”light” slug_hash=”mPzQWq” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/mPzQWq/’>mPzQWq</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Посмотреть на весь экран можно тут
Здравствуйте . Подскажите пожалуйста , я сделал блок (), потом в произвольных ссылках меню прописывал этот id через # , но все равно скролинг не работает , может быть Вы знаете как его сделать? Мой сайт qubhookah.beget.tech , то есть я хочу при нажатие на кнопку «Try»сделать скроллинг.
Я думаю дело в каком то скрипте , но не как не могу понять в каком(
Роман, вы использовали код из моей статьи или какой то другой? Если из моей статьи, то как вы его подключали?
Использовала ваш скрипт для скролинга, все отлично, но есть одно НО… почему то в карусели с фотографиями при нажатии на следующую фотографию ваш код начинает опускать страницу вниз.. как это исправить?
Мой код охватывает все ссылки вида
<a href="#" rel="nofollow"></a>. В вашем случае переход к следующей фотографии осуществляется такой же ссылкой. Самое простое решение – ссылкам, которые служат для перехода к якорю добавить класс, напримерclass="go-anchor"и обработчик повесить на этот класс:$('.go-anchor').on('click', function(event) { тут код остается прежним });Спасибо, попробую!)
спасибо все работает . единственно что уточню что классы надо прописывать именно в теле тега
добрый день. можете подсказать, как сделать тоже самое, но при использовании “button”?
То есть, нужно что бы при нажатии на кнопку так же происходил скролл(в моём случае к forme)
Добрый день, Михаил. Можно сделать, например, добавив атрибут data. Например, вот так https://codepen.io/AmateR/pen/YzqzLdv