Скрипт плавной прокрутки без якоря в адресной строке

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

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

Посмотреть пример

Скрипт плавной прокрутки

Так как скрипт реализован с применением 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. Опять начинаю публиковать статьи. Простите за такой долгий перерыв. А на какую темы вы бы хотели увидеть следующую статью на блоге?

Скачать исходник

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 5

  1. Михаил

    Я уже давно ищу решение, как можно сделать перелистывание целыми блоками, чтобы сами блоки могли иметь любой уровень вложенности, любое форматирование. Обычные решения (карусели на jQuerry), как я понимаю, позволяют листать только изображения. А мне нужно именно целыми блоками. Может быть есть такое решение. Я находил SlideJS — почти то что мне нужно, но он плохо работатает именно со сложно организованными дивами (вложенными). Он считает за слайд только один див, и всё внутри должно оформляться другими тегами. И вообще он иногда непредсказуемо себя ведёт.

    Я бы хотел увидеть такую статью:-)

  2. Михаил

    Почти нашел другое решение, работает нормально, предсказуемо, вложенность любая, но блин только один тип анимации поддерживает — плавную смену (фэйд). А мне нужно именно перелистывание.

    • dimadv7

      А такое не подойдет, или я так и не понял, что конкретно требуется _http://alvarotrigo.com/fullPage/
      Вот статья с демо

  3. Ильдар

    Отличное решение, все отлично работает!

    • dimadv7

      А то!))

Добавить комментарий