» »

Плавная прокрутка до элемента на jQuery

Плавная прокрутка до элемента на jQuery

Вашему вниманию отличное решение на плавный скроллинг на заданный элемент, где плавный переход реализован при помощи jQuery и стиля CSS. Вероятно вы встречали не редко навигацию на различных интернет сайтах, где при клике на ключевое слово происходит прокрутка на страницы до заданного материала. Больше всего можно встретить на одно страничном сайте или на портфолио, но сейчас оно стало популярным на официальных площадках. Так как вы изначально задаете ключевые фразы и под них выставляете на страницы якоря.

Где пользователь и гость читает, и если ему нужна это информация, то происходит клик и происходит прокрутка, где останавливается ровно на том материале, где был указан в меню, вообще тот который он по клику искал. Но это все для ознакомления, чтоб было понятно как все работает, для этого будет предоставлено demo страница, где можете оценить в реальности.

Переходим к материалу, так как в данном мануале подробно рассмотрим и разберем как веб мастеру реализовать плавный скролл, где используется jQuery. Также присутствует структура HTML страницы, где изначально начнем, так как атрибуты ссылок href изначально закреплены под якоря #id где идет полное соответствие блокам, как раз до которых идет прокручивание или скролл на странице. Его можно использовать как в начале, где основном выстраивают навигацию.

Приступаем к установке:

HTML

Код
<body>
  <div class="detumiska">
  <ul>
  <li><a href="#kagasblusa1">Первый блок</a></li>
  <li><a href="#kagasblusa2">Второй блок</a></li>
  <li><a href="#kagasblusa3">Третий блок</a></li>
  </ul>
  </div>
  <div id="kagasblusa1">Каркас под номером 1</div>
  <div id="kagasblusa2">Каркас под номером 2</div>
  <div id="kagasblusa3">Каркас под номером 3</div>
</body>

CSS

Код
.detumiska ul{
  overflow: hidden;
  }
  .detumiska li {
  list-style: none;
  /* float: left; */
}
  #kagasblusa1{
  width:100%;
  height:500px;
  background-color: #ef3b3b;
  }
  #kagasblusa2{
  width:100%;
  height:500px;
  background-color: #18bd18;
  }
  #kagasblusa3{
  width:100%;
  height:500px;
  background-color: #5454e6;
  }

JS

Теперь осталось добавить js скрипт, который отвечает за функцию и плавность эффекта.

Код
jQuery(document).ready(function(){
  jQuery('.detumiska a[href^="#"]').click( function(){
  var scroll_el = jQuery(this).attr('href');
  var destination = jQuery(scroll_el).offset().top;
  if (jQuery(scroll_el).length != 0) {
  jQuery('html, body').animate( { scrollTop: destination }, 1100 );
  }
  return false;
  });
  })

Некоторые блогеры и администраторы интернет площадок помещают в сам контент, где отлично вписывается, так как прописывают ключевые фразу, и под них ставят якорь, где при переходе вы можете ознакомиться, что означает то слово или фраза, по которой вы сделали переход.

Демонстрация
2018-10-31 Загрузок: 1 Просмотров: 202 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
CbIPoK2513
CbIPoK2513 2018-11-05 04:081
0
Плавной она была бы, если бы к каждому блоку была одинаковая скорость прокрутки)
А так это банальная "прокрутка к якорю")
Kosten
Kosten 2018-11-05 14:012
0
Так в описание указано, что под якорь ставят нужно, просто в общем, для навигаций на одной страницы это просто необходимо, чтоб быстрей найти то что указано под ключевыми фразами.
avatar