Всем привет. Когда-то давно я уже писал статью о том, как сделать плавную прокрутку к якорю. Скрипт отлично работает, но как известно, во многих подобных реализациях этого эффекта в адресной строке появляется сам якорь.
Мне часто писали, что хотели бы видеть чистую адресную строку и в этой статье я просто выложу небольшой скрипт, который реализует плавную прокрутку без добавления якоря в адресную строку.
Скрипт плавной прокрутки
Так как скрипт реализован с применением jQuery, то первым делом подключаем его. Я это делаю перед закрывающимся тегом </body>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Далее, давайте создадим меню. Ничего особенного, просто ненумерованный список со ссылками:
<ul class="nav nav-tabs nav-justified">
<li><a href="#firstBlock">Первый якорь</a></li>
<li><a href="#secondBlock">Второй якорь</a></li>
<li><a href="#thirdBlock">Третий якорь</a></li>
<li><a href="#fourthBlock">Четвертый якорь</a></li>
</ul>
Такие классы - потому что я использую bootstrap, но это никак не влияет на работу скрипта. Просто использую его, чтобы тратить меньше времени на написание стилей. В качестве параметра ссылки задаем id блоков, к которым будет происходить прокрутка. Для удобства я дал "говорящие" названия. То есть при клике на ссылку с параметром #fourthBlock, будет происходить прокрутка к блоку, у которого id="fourthBlock". Все - просто.
Но подобным образом выглядит все и сотнях других реализациях плавной прокрутки. Давайте теперь добавим сам скрипт, ради чего все и затевалось. Помните, что добавляем его после подключения jQuery.
<script>
$(document).ready(function(){
$("a[href*='#']").on("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 777);
e.preventDefault();
return false;
});
});
</script>
Вот такое простое решение, которое поможет убрать лишние параметры в адресной строке на вашем landing page. Опять начинаю публиковать статьи. Простите за такой долгий перерыв. А на какую темы вы бы хотели увидеть следующую статью на блоге?
17 комментариев
Я уже давно ищу решение, как можно сделать перелистывание целыми блоками, чтобы сами блоки могли иметь любой уровень вложенности, любое форматирование. Обычные решения (карусели на jQuerry), как я понимаю, позволяют листать только изображения. А мне нужно именно целыми блоками. Может быть есть такое решение. Я находил SlideJS - почти то что мне нужно, но он плохо работатает именно со сложно организованными дивами (вложенными). Он считает за слайд только один див, и всё внутри должно оформляться другими тегами. И вообще он иногда непредсказуемо себя ведёт.
Я бы хотел увидеть такую статью:-)
Почти нашел другое решение, работает нормально, предсказуемо, вложенность любая, но блин только один тип анимации поддерживает - плавную смену (фэйд). А мне нужно именно перелистывание.
А такое не подойдет, или я так и не понял, что конкретно требуется _http://alvarotrigo.com/fullPage/
Вот статья с демо
Отличное решение, все отлично работает!
А то!))
Если вставлять полные ссылки, то плавная анимация работать не будет.
Очень жаль
То есть меню нельзя сделать динамическим.
Спасибо! Все конкретно!
# - нужно в кавычки брать!
Зачем в кавычки брать?
Вообще, я просто задаю класс тем ссылкам, по которым кликать буду и использую их. Например:
А потом:
<script> $(document).ready(function(){ $(".content-link").on("click", function(e){ var anchor = $(this); $('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top }, 777); e.preventDefault(); return false; }); }); </script>dimadv7, здравствуйте. Ваш скрипт не работает на Jquery 3.3.1 min. На 2.1.4, как вы указали, все в норме. Можно ожидать от вас обновление скрипта?
Дополняю:
Как и писал Антон, из комментария выше, # нужно было взять в одинарные кавычки в скрипте, теперь скрип работает и в 3.3.1.
<script> $(document).ready(function(){ $("a[href*='#']").on("click", function(e){ var anchor = $(this); $('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top }, 777); e.preventDefault(); return false; }); }); </script>Спасибо, что отписали о том, что именно с 3 версией проблемы. Добавлю комментарий, позже, что действительно для 3 версии jQ нужно брать в кавычки, хотя, я по-прежнему думаю, что проще просто к классу привязываться, а не к решетке
Здравствуйте!
подскажите, пожалуйста, почему эффект плавной прокрутки работает только если я открываю файл index.html у себя в браузере.
А если открываю в интернете, т.е. через домен, то этот эффект не срабатывает?
Посмотрите, есть ли ошибки в инспекторе?
Здравствуйте! а где указывается скорость прокрутки? например чтобы прокрутка выполнялось 1 сек
максим, поиграйте с этим параметром (777):
$('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top }, 777);Дмитрий, при увеличение значения скорость не изменяется