Smartlanding

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

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

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

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

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

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

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

14 комментариев

  • Михаил

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

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

    Ответить
  • Михаил

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

    Ответить
  • dimadv7

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

    Ответить
  • Ильдар

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

    Ответить
  • dimadv7

    А то!))

    Ответить
  • Вася

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

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

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

    Ответить
  • Навруз

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

    Ответить
  • Антон

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

    Ответить
  • 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>
    
    Ответить
  • Иван

    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 нужно брать в кавычки, хотя, я по-прежнему думаю, что проще просто к классу привязываться, а не к решетке

    Ответить
  • Ed

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

    Ответить
  • dimadv7

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

    Ответить

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

Поделитесь статьей в социальных сетях, чтобы не потерять