Vertical Scrolling Pagination

Developer
Ali Klein
Size
2,980 Kb
Views
56,672
  1. Vertical Scrolling Pagination Previews
  2. Vertical Scrolling Pagination HTML Codes
  3. Vertical Scrolling Pagination CSS Codes
  4. Vertical Scrolling Pagination JS Codes

How do I make an vertical scrolling pagination?

What is a vertical scrolling pagination? How do you make a vertical scrolling pagination? This script and codes were developed by Ali Klein on 11 July 2022, Monday.

Vertical Scrolling Pagination Previews
IQ Test

Vertical Scrolling Pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical Scrolling Pagination</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="pagination"> <li><a href="#page1"></a></li> <li><a href="#page2"></a></li> <li><a href="#page3"></a></li> <li><a href="#page4"></a></li> <li><a href="#page5"></a></li>
</ul>
<div class="main"> <section id="page1"> <div class="page_container"> <h1>Page 1</h1> </div> </section> <section id="page2"> <div class="page_container"> <h1>Page 2</h1> </div> </section> <section id="page3"> <div class="page_container"> <h1>Page 3</h1> </div> </section> <section id="page4"> <div class="page_container"> <h1>Page 4</h1> </div> </section> <section id="page5"> <div class="page_container"> <h1>Page 5</h1> </div> </section>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/2.0.0/jquery.smooth-scroll.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vertical Scrolling Pagination - Script Codes CSS Codes

.main section { margin: 0; height: 100vh;
}
.main section:nth-child(1) { background-color: #435656;
}
.main section:nth-child(2) { background-color: #526a6a;
}
.main section:nth-child(3) { background-color: #627e7e;
}
.main section:nth-child(4) { background-color: #729292;
}
.main section:nth-child(5) { background-color: #86a2a2;
}
.main section h1 { font-size: 38px; color: #fff; margin: 0; padding: 50px 0 20px; text-align: center;
}
#pagination { position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 30px; list-style: none;
}
#pagination li { position: relative; margin: 20px 0; background: #fff; border-radius: 100%; width: 8px; height: 8px; -webkit-transition: all .2s ease; transition: all .2s ease;
}
#pagination li:hover { -webkit-transform: scale(1.5); transform: scale(1.5);
}
#pagination a { position: absolute; text-decoration: none; left: 0; top: 0; color: inherit; width: 100%; height: 100%;
}
body { font-family: sans-serif; margin: 0;
}
.active-dot, body.page-1 #pagination li:first-of-type, body.page-2 #pagination li:nth-of-type(2), body.page-3 #pagination li:nth-of-type(3), body.page-4 #pagination li:nth-of-type(4), body.page-5 #pagination li:nth-of-type(5) { -webkit-transform: scale(2); transform: scale(2);
}

Vertical Scrolling Pagination - Script Codes JS Codes

function pagination() { var offset = $(document).scrollTop(), windowHeight = $(window).height(), body = $('body'); switch (true) { case (offset > (windowHeight * 3.75)): body.removeClass().addClass('page-5'); break; case (offset > (windowHeight * 2.75)): body.removeClass().addClass('page-4'); break; case (offset > (windowHeight * 1.75)): body.removeClass().addClass('page-3'); break; case (offset > (windowHeight * .75)): body.removeClass().addClass('page-2'); break; case (offset < windowHeight): body.removeClass().addClass('page-1'); break; default: body.removeClass().addClass('page-1'); }
}
pagination();
$(document).scroll(function() { pagination();
});
$('a').smoothScroll();
Vertical Scrolling Pagination - Script Codes
Vertical Scrolling Pagination - Script Codes
Home Page Home
Developer Ali Klein
Username AliKlein
Uploaded July 11, 2022
Rating 3
Size 2,980 Kb
Views 56,672
Do you need developer help for Vertical Scrolling Pagination?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ali Klein (AliKlein) Script Codes
Name
Parallax Background Scroll
Speech Bubble Animation
Buzzy Pen
Owl Carousel Sync Nav Links
Horizontal Scroll Progress Bar
Mobile Nav Menu
CSS Motion Path Airplane
David Bowie SVG Morph
Youtube API Multiple Videos
Momentum Scrolling
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!