Переходы между страницами сайта

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


Переходы между страницами сайта

Разметка HTML

Первое что нам надо - это разметка HTML. В теге head мы поместим ссылку на jquery и шрифт от google fonts.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Переход между страницами</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed" rel="stylesheet"> 
</head>

Теперь добавим меню и блоки, куда нас будут перенаправлять по клику на меню.


<div id="menu-nav">
  <ul>
  <li class="one"><a class="scrollTo oneHr" data-scrollTo="content1" href="#">Раздел 1</a></li>
    <li class="one"><a class="scrollTo twoHr" data-scrollTo="content2" href="#">Раздел 2</a></li>
<li class="two"> <a class="scrollTo threeHr" data-scrollTo="content3" href="#">Раздел 3</a></li>
  </ul>
  </div>

<div id="content1">Страница 1</div>
<div id="content2">Страница 2</div>
<div id="content3">Страница 3</div>

Css

Теперь приступаем к стилям. Создаем папку css. В ней мы создаем файл style.css. Чтобы наше меню и блки выглядело красиво и понятно, мы добавим некоторые стили.


* {
  margin: 0;
  padding: 0;
}
#menu-nav ul{
  display: flex;
}
#menu-nav {
  padding: 10px;
position: fixed;
width: 100%;
background: #c11313;
}
#menu-nav ul li {
  margin: 0 20px;
  list-style: none;
}
#menu-nav a {
  color: white;
  text-decoration: none;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 1.1em;
}
#content1, #content2, #content3 {
  background: #ededed;
  width: 100%;
  height: 100vh;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: center;
align-items: center;
font-size: 2em;
font-family: 'Fira Sans Condensed', sans-serif;
}

jQuery

Последнее, что нам надо сделать, это добавить jquery код.


$('a.scrollTo').on('click', function(){
  var scrollTo = $(this).attr('data-scrollTo');

	$('a.scrollTo').on('click', function(){
  var scrollTo = $(this).attr('data-scrollTo');
  $('body, html').animate({
    "scrollTop": $('#'+scrollTo).offset().top
  }, 1000 );

  return false;
})
 

Первое, что мы делаем, это находим ссылку отвечающая за меню. Ей мы добавляем функцию по клику. Потом мы находим атрибут data-scrollTo, который отвечает за переход на ту часть странице, где id схожен с атрибутом data-scrollTo. Остается добавить анимацию перехода на страницу. Делаем мы это с помощью animate.