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

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

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

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

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

Так как скрипт реализован с применением 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ывайтесь на обновления!

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

  1. Михаил

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

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

  2. Михаил

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

    • dimadv7

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

  3. Ильдар

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

    • dimadv7

      А то!))

  4. Вася

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

    <a href="http://smartlanding.biz/demo/scrolling/#fourthBlock">Четвертый якорь</a>

    То есть меню нельзя сделать динамическим.

  5. Навруз

    Спасибо! Все конкретно!

  6. Антон

    # — нужно в кавычки брать!

    • dimadv7

      Зачем в кавычки брать?

      Вообще, я просто задаю класс тем ссылкам, по которым кликать буду и использую их. Например:

      <li><a class="content-link" href="#firstBlock">Первый якорь</a></li>
        <li><a class="content-link" href="#secondBlock">Второй якорь</a></li>
        <li><a class="content-link" href="#thirdBlock">Третий якорь</a></li>
        <li><a class="content-link" href="#fourthBlock">Четвертый якорь</a></li>

      А потом:

      <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>
      
  7. Иван

    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>
    • dimadv7

      Спасибо, что отписали о том, что именно с 3 версией проблемы. Добавлю комментарий, позже, что действительно для 3 версии jQ нужно брать в кавычки, хотя, я по-прежнему думаю, что проще просто к классу привязываться, а не к решетке

  8. Ed

    Здравствуйте!
    подскажите, пожалуйста, почему эффект плавной прокрутки работает только если я открываю файл index.html у себя в браузере.
    А если открываю в интернете, т.е. через домен, то этот эффект не срабатывает?

    • dimadv7

      Посмотрите, есть ли ошибки в инспекторе?

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