Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5

by Anatoly Kulikov

HTML

<header>
  <a href="#" data-jump="#dark">Scroll to Dark</a>
  <a href="#" data-jump="#blue">Scroll to Blue</a>
  <a href="#" data-jump="#violet">Scroll to Violet</a>
  <a href="#" data-jump="#green">Scroll to Green</a>
  <a href="#" data-jump="#orange">Scroll to Orange</a>
</header>
<section id="dark"><h2>Dark</h2></section>
<section id="blue"><h2>Blue</h2></section>
<section id="violet"><h2>Violet</h2></section>
<section id="green"><h2>Green</h2></section>
<section id="orange"><h2>Orange</h2></section>

CSS

section {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  align-content: center;
}
h2 {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 10vh;
  color: #fff;
}
#dark {
  background-color: #010b23;
}
#blue {
  background-color: #0077b0;
}
#violet {
  background-color: #442a90;
}
#green {
  background-color: #389f88;
}
#orange {
  background-color: #eb4c0a;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

a {
  display: inline-block;
  padding: 18px 7px;
  text-decoration: none;
  color: #fff;
}

JavaScript

$(function(){
  $("a[data-jump^='#']").click(function(){
    var _href = $(this).attr("data-jump");
    $("html, body").animate({scrollTop: $(_href).offset().top+"px"});
    return false;
  });
});