Scrolly.js official demo

In this example below you will see how to do a Scrolly.js official demo with some HTML / CSS and Javascript

Official demo por Scrolly.js:

This awesome code was written by mitsugarzaki, you can see more from this user in the personal repository.
You can find the original code on
Copyright mitsugarzaki ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Scrolly.js official demo</title>
    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



      <li><a class="active" data-scrolly-target="#home" data-scrolly-active="data-scrolly-active">Home</a></li>
      <li><a data-scrolly-target="#portfolio">Portfolio</a></li>
      <li><a data-scrolly-target="#contact-me">Contact me</a></li>
<section class="pages">
  <div class="page home" id="home" data-scrolly-page="data-scrolly-page" data-scrolly-active="data-scrolly-active"></div>
  <div class="page portfolio" id="portfolio" data-scrolly-page="data-scrolly-page"></div>
  <div class="page contact-me" id="contact-me" data-scrolly-page="data-scrolly-page"></div>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
*, *:before, *:after {
  box-sizing: border-box;

header {
  display: block;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
header nav {
  align-items: center;
  display: flex;
  height: 60px;
  justify-content: flex-end;
  padding: 0 50px;
  width: 100%;
header nav ul {
  display: block;
  list-style: none;
header nav ul li {
  display: inline-block;
header nav ul li a {
  border-bottom: 2px solid transparent;
  display: block;
  color: #FFF;
  cursor: pointer;
  font-family: ubuntu;
  font-size: 14px;
  font-weight: 600;
  margin: 0 5px;
  padding: 5px 8px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .25s ease;
header nav ul li a:hover {
  color: gold;
header nav ul li {
  border-bottom-color: #FFF;

.pages {
  display: block;
.pages .page {
  display: block;
  height: 100vh;
  width: 100vw;
.pages .page.home {
  background-color: #27ae60;
.pages .page.portfolio {
  background-color: #f1c40f;
.pages {
  background-color: #95a5a6;

/*Downloaded from */
'use strict';

document.addEventListener('DOMContentLoaded', function () {
  var scrolly ={
    pageMode: true,
    duration: 900,
    timmingFn: 'easeOutInQuad',
    onAnchorClick: onAnchorClick,
    afterScroll: afterScroll

  function onAnchorClick(anchor) {
    console.log('On anchor click');
    scrolly.anchors.forEach(function (a) {
      return a.classList.remove('active');
  function afterScroll(source, target) {
    console.log('After scroll....');
    scrolly.anchors.forEach(function (a) {
      return a.classList.remove('active');
    var activeAnchor = scrolly.anchors.filter(function (a) {
      if (scrolly.isAnchorActive(a)) return a;