ZorNet.Ru — сайт для вебмастера » HTML и CSS » Прокрутка ссылок на страницы HTML

Прокрутка ссылок на страницы HTML

В статье рассмотрим один актуальный эффект на чистом CSS, это как можно по одному нажатию клику прокрутить HTML-страницу до заданного привязки. А если понятнее и точнее, то здесь будем создавать функцию плавной прокрутки без JavaScript. Где предусмотрена плавная прокрутка CSS, которая производится с помощью стилистики CSS, что можно самостоятельно задавать скорость.

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

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

Все проверено и отлично работает, где даже немного изменил кнопки:

Установочный процесс:

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

HTML

Код

<ul>
  <li class="kolunoesig-lankaned" id=""><a href="#masedam">Скрипты</a></li>
  <li class="kolunoesig-lankaned" id=""><a href="#dev">Дизайн</a></li>
  <li class="kolunoesig-lankaned" id=""><a href="#naszabuv">Шаблоны</a></li>
  <li class="kolunoesig-lankaned" id=""><a href="#kirasib">Контакты</a></li>
  <li class="kolunoesig-lankaned" id=""><a href="#agmod">Стили CSS</a></li>
  </ul>

  <div id="kamavesamigned">
  <div id="masedam"><h1>Первый</h1></div>
  <div id="dev"><h1>Второй</h1></div>
  <div id="naszabuv"><h1>Третий</h1></div>
  <div id="kirasib"><h1>Четвертый</h1></div>
  <div id="agmod"><h1>Пятый</h1></div>
  </div>

CSS

Код

ul{
  position: fixed;
  top: 17%;
  left: 0;
  transform: translateY(50%);
  margin: 0;
  padding: 0;
  z-index: 1;
}
ul li{
  list-style: none;
}
#kamavesamigned{
  width: 100%;
  height: 100vh;
}
#kamavesamigned div{
  position: relative;
  width: 100%;
  height: 100%;
}

#kamavesamigned div h1{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  font-size: 8rem;
  color: #f1f2f3;
}
ul li a {
  display: block;
  text-decoration: none;
  height: 32px;
  font-size: 25px;
  background: #443e3e;
  width: 140px;
  color: #efecec;
  margin: 5px 0;
  padding-left: 8px;
  /* text-transform: uppercase; */
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  line-height: 27px;
}
ul li a:hover {
  background: #35385f;
  text-decoration: none;
  color: #f2f5c8;
}
#kamavesamigned{
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-Y: scroll;
}
#kamavesamigned div#masedam{
  background-color: #1ca9ab;
}
#kamavesamigned div#dev{
  background-color: #4d5ee6;
}
#kamavesamigned div#naszabuv{
  background-color: #c249c3;
}
#kamavesamigned div#kirasib{
  background-color: #19985b;
}
#kamavesamigned div#agmod{
  background-color: #9a1c2d;
}

В основном функции плавной прокрутки встроены в JavaScript или в любую среду JS, но здесь создаем плавной прокруткой на чистом CSS, плюс Bootstrap. Где этот стиль только задействована для создания макета, не используя javascript.

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

Видео обзор:

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

Так как если делать отдельно, хотя по всем параметрам она и должна быть отдельно от материала, но с главным переходом на этот прекрасный плавной прокрутки ссылок только с CSS.

Демонстрация

25 Июля 2019 Загрузок: 1 Просмотров: 3164 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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