• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Плавный переход к якорю с помощью CSS (Якоря и плавный переход по якорным ссылкам HTML + CSS)
Плавный переход к якорю с помощью CSS
Kosten
Дата: Суббота, 2019-11-30, 20:53 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25239
Награды: 57


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

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

Библиотека:

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

1. Делаем простую разметку:

HTML

Код
<nav>
  <ul class="clearfix">
      <li><a href="#section1">Секция 1</a></li>
      <li><a href="#section2">Секция 2</a></li>
      <li><a href="#section3">Секция 3</a></li>
  </ul>
</nav>

<section id="section1">
    <h3>Первая секция</h3>
    <p><a href="#section2">Перейти к секции 2</a></p>
</section>
<section id="section2">
    <h3>Вторая секция</h3>
    <p><a href="#section3">Перейти к секции 3</a></p>
</section>
<section id="section3">
    <h3>Третья секция</h3>
    <p><a href="#section1">Перейти к секции 1</a></p>
</section>

CSS

Код
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

nav {
  width: 100%;
  background-color: #051945;
}

ul {
    list-style: none;
  width: 249px;
}

ul:hover li a {
  color: grey;
}

ul li {
    float: left;
  line-height: 30px;
}

ul li a {
  color: #FFF;
  text-decoration: none;
  margin: 15px 10px;
}

ul li:hover a {
  color: #22EBBE;
}

section {
  margin-bottom: 100%;
}


See the Pen
Якорь
by Kocsten (@kocsten)
on CodePen.




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

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

JS

Код
$(function(){
  $('a[href^="#"]').on('click', function(event) {
    // отменяем стандартное действие
    event.preventDefault();
    
    var sc = $(this).attr("href"),
        dn = $(sc).offset().top;
    /*
    * sc - в переменную заносим информацию о том, к какому блоку надо перейти
    * dn - определяем положение блока на странице
    */
    
    $('html, body').animate({scrollTop: dn}, 1000);
    
    /*
    * 1000 скорость перехода в миллисекундах
    */
  });
});


Теперь смотрим как получилось


See the Pen
Переход к якорю
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Плавный переход к якорю с помощью CSS (Якоря и плавный переход по якорным ссылкам HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: