ScrollTop Demo
How do I make an scrolltop demo?
A look into using scrollTop and some layout options in a responsive setting. Demo inspired by this pen from C.Gruber (http://codepen.io/cgruber/pen/kotqf). What is a scrolltop demo? How do you make a scrolltop demo? This script and codes were developed by GRAY GHOST on 23 June 2022, Thursday.
ScrollTop Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ScrollTop Demo</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, user-scalable=1, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="banner" role="banner"> <div class="grid"> <a href="#hero" class="logo scrollto" rel="bookmark">FM</a> <button type="button" role="button" aria-label="Toggle Navigation" data-navicon="button" class="icon-menu navicon navicon-x"> <span class="navicon__lines"></span> </button> <nav role="navigation"> <ul class="nav__list"> <li class="nav__list-item"> <a href="#fillinfo" class="scrollto">Fill Info</a> </li> <li class="nav__list-item"> <a href="#stayintouch" class="scrollto">Stay in Touch</a> </li> <li class="nav__list-item"> <a href="#news" class="scrollto">News & Updates</a> </li> <li class="nav__list-item"> <a href="#services" class="scrollto">Services</a> </li> </ul> </nav> </div>
</header>
<div class="hero" id="hero"> <h1 class="hero__title">Fill Murray</h1> <p class="hero__tagline">never fear the scroll</p> <div class="mouse" aria-hidden="true"> <span class="mouse__wheel"></span> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/392/Apple_logo_black.svg.png" alt="the trademark of apple inc."> </div>
</div>
<main class="section" id="fillinfo" role="main"> <div class="grid"> <h1>Fill Info</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> </div> <div class="section" id="stayintouch"> <div class="grid"> <h1>Stay in Touch</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> </div> </div> <div class="section" id="news"> <div class="grid"> <h1>News & Updates</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> </div> </div> <div class="section" id="services"> <div class="grid"> <h1>Services</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> </div> </div>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='js/a08e0d79c150ff5030f9b6afa.js'></script> <script src="js/index.js"></script>
</body>
</html>
ScrollTop Demo - Script Codes CSS Codes
[data-navicon="button"] { display: inline-block; margin: 0; border: none; background: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
[data-navicon="button"] > * { display: block;
}
[data-navicon="button"]:focus { outline: none;
}
.navicon { padding: 0.77778rem 0.4375rem; -webkit-transition: 0.3s; transition: 0.3s;
}
.navicon__lines { display: inline-block; width: 1.75rem; height: 0.25rem; background: black; border-radius: 0.125rem; -webkit-transition: 0.3s; transition: 0.3s; position: relative;
}
.navicon__lines:before, .navicon__lines:after { display: inline-block; width: 1.75rem; height: 0.25rem; background: black; border-radius: 0.125rem; -webkit-transition: 0.3s; transition: 0.3s; position: absolute; left: 0; content: ''; -webkit-transform-origin: 0.125rem center; transform-origin: 0.125rem center;
}
.navicon__lines:before { top: 0.4375rem;
}
.navicon__lines:after { top: -0.4375rem;
}
.is--closed .navicon__lines { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8);
}
.navicon-x.is--closed .navicon__lines { background: transparent;
}
.navicon-x.is--closed .navicon__lines:before, .navicon-x.is--closed .navicon__lines:after { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; width: 1.75rem;
}
.navicon-x.is--closed .navicon__lines:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg);
}
.navicon-x.is--closed .navicon__lines:after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg);
}
*:before, *:after { box-sizing: inherit;
}
html { box-sizing: border-box;
}
html.pinned { overflow: hidden;
}
html,
body { margin: 0; padding: 0; height: 100%;
}
a { text-decoration: none;
}
h1 { margin-top: 0; padding-top: 21px; font-family: "Oswald", sans-serif; font-size: 30px; line-height: 1.8; text-transform: uppercase;
}
p { margin-bottom: 0; padding-bottom: 20px; font-size: 17px; line-height: 2;
}
body { font-family: "Oswald", sans-serif; font-weight: 300; font-smoothing: antialiased;
}
body:before { content: ""; display: block; width: 100%; height: 100%; position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: -1; background: url(//s3-us-west-2.amazonaws.com/s.cdpn.io/392/900-1.jpg) no-repeat center center fixed; background-size: cover; -webkit-filter: sepia(0.5); filter: sepia(0.5); opacity: 0.4;
}
.grid { max-width: 1040px; margin: 0 auto; padding: 0 5%;
}
.banner .grid { padding: 0; max-width: 1040px; margin: 0 auto; padding: 0 5%;
}
@media only screen and (min-width: 766px) { .banner .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}
.banner { height: 100%; position: absolute; top: 0; max-height: 56px; width: 100%; overflow: hidden; z-index: 999; -webkit-transition: all 0.3s; transition: all 0.3s; font-family: "Oswald", sans-serif; background: none;
}
@media only screen and (min-width: 766px) { .banner { height: auto; }
}
.banner.is-open { max-height: 100%; position: fixed; top: 0; overflow: scroll; background: rgba(255, 255, 255, 0.93); opacity: 1;
}
.hero { display: table; width: 100%; height: 100%; position: relative; text-align: center; min-height: 100vh; font-family: "Oswald", sans-serif; letter-spacing: 2px;
}
@media only screen and (min-width: 766px) { .hero { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}
.hero__title { display: table-cell; height: 100%; margin: 0; padding: 0; vertical-align: middle; width: 100%; font-size: 50px; line-height: 1.3;
}
@media only screen and (min-width: 766px) { .hero__title { display: block; height: auto; width: auto; }
}
.hero__tagline { display: table-row;
}
@media only screen and (min-width: 766px) { .hero__tagline { display: block; }
}
.logo { display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: 0; width: 50px; font-size: 25px; line-height: 1; text-transform: uppercase; color: black;
}
@media only screen and (max-width: 766px) { .logo { margin-top: 17px; }
}
@media only screen and (max-width: 766px) { nav { width: 100%; }
}
nav a { color: #000; font-size: 32px; text-transform: uppercase;
}
@media only screen and (min-width: 766px) { nav a { font-size: 15px; }
}
.nav__list { list-style: none; padding-left: 0;
}
.nav__list-item { line-height: 1.5;
}
@media only screen and (min-width: 766px) { .nav__list-item { display: inline-block; margin-left: 35px; }
}
.icon-menu { cursor: pointer; position: absolute; top: 0; right: 22px;
}
@media only screen and (min-width: 766px) { .icon-menu { display: none; }
}
.section { background: #333; color: #CCC;
}
.is-sticky { position: fixed; top: 0; background: rgba(255, 255, 255, 0.93); opacity: 1;
}
.mouse { display: block; margin: 0 auto; width: 26px; height: 48px; border-radius: 12px; background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border: 2px solid white; position: absolute; bottom: 40px; position: absolute; left: 51%; margin-left: -26px;
}
.mouse img { margin-top: 14px; width: 9px; height: auto; opacity: 0.15;
}
.mouse__wheel { display: block; margin: 6px auto; width: 2px; height: 2px; border-radius: 4px; background: #000; border: 1px solid transparent; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll; animation-name: scroll;
}
@-webkit-keyframes scroll { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); }
}
@keyframes scroll { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); }
}
ScrollTop Demo - Script Codes JS Codes
// Config
// =================================================
var $root = $('html'), $nav_header = $('.banner'), $navicon = $('[data-navicon="button"]'), header_height = $('.banner').height(), hero_height = $('.hero').height(), offset_val = hero_height - header_height, eventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');
// Methods
// =================================================
function navSlide() { var scroll_top = $(window).scrollTop(); if (scroll_top >= offset_val) { $nav_header.addClass('is-sticky'); } else { $nav_header.removeClass('is-sticky'); }
}
function menuToggle() { if($nav_header.hasClass('is-open')) { $root.removeClass('pinned'); $nav_header.removeClass('is-open'); $navicon.removeClass('is--closed'); } else { $root.addClass('pinned'); $nav_header.addClass('is-open'); $navicon.addClass('is--closed') }
}
function openNav() { if ($nav_header.hasClass('is-open')) { $nav_header.removeClass('is-open'); $root.removeClass('pinned'); $navicon.removeClass('is--closed'); }
}
function anchorScroll(event) { var id = $(this).attr('href'), offset = header_height, target = $(id).offset().top - offset; $('html, body').animate({ scrollTop: target }, 500); event.preventDefault();
}
// Handlers
// =================================================
$('.scrollto').on(eventType, function() { anchorScroll.call(this, event);
});
$navicon.on(eventType, menuToggle);
$('.banner a').on(eventType, openNav);
$(window).scroll(navSlide);
Developer | GRAY GHOST |
Username | grayghostvisuals |
Uploaded | June 23, 2022 |
Rating | 4.5 |
Size | 7,104 Kb |
Views | 80,960 |
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!
Name | Size |
Polybird | 6,417 Kb |
French Curve | 5,330 Kb |
Fixed Curtains | 4,912 Kb |
Secure Input | 6,436 Kb |
Wave | 5,440 Kb |
Filter Animation | 2,234 Kb |
Mocean PlayfulModals | 5,611 Kb |
Static Image to Video Block | 4,864 Kb |
Full Screen Background Video | 7,221 Kb |
Sticky Scroll | 3,015 Kb |
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!
Name | Username | Size |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
See Through | Larrygeams | 77,410 Kb |
Loading animation | Codeams | 2,408 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Minimelephant | Smashlee | 2,507 Kb |
CSS Gem Badge | Orchard | 3,335 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!