Scroll down button
How do I make an scroll down button?
What is a scroll down button? How do you make a scroll down button? This script and codes were developed by Andy Lorimer on 22 July 2022, Friday.
Scroll down button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll down button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="col"> <button class="scroll"> <span class="instruct"></span> </button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Scroll down button - Script Codes CSS Codes
body { margin: 0; padding: 0;
}
button:focus { outline: none;
}
.wrapper { position: absolute; width: 100%; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}
.col { display: inline-block; margin: 0 20px;
}
/* Mouse scroll */
.scroll { position: relative; display: inline-block; width: 20px; height: 30px; border: solid 2px black; background: none; border-radius: 8px; cursor: pointer;
}
.instruct { position: absolute; width: 3px; height: 8px; background: black; border-radius: 10px; top: 20%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
}
Scroll down button - Script Codes JS Codes
// mouse
function scrollAni() { var $scroll = $('.instruct'); $scroll.fadeIn({queue: false, duration: 300}) $scroll.animate({ top: '50%' }, 300); $scroll.fadeOut({queue: true, duration: 300}); setTimeout( function() { $scroll.css({'top':'20%'}); }, 1000);
}
$(function() {
scrollAni();
setInterval(scrollAni, 2000);
});
Developer | Andy Lorimer |
Username | andylorimer |
Uploaded | July 22, 2022 |
Rating | 3 |
Size | 2,081 Kb |
Views | 54,648 |
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 |
Feature Slider | 3,003 Kb |
Searchbar with Navigation | 2,929 Kb |
Random Spinning loader | 1,619 Kb |
Off-Canvas Menu | 2,794 Kb |
Input field - jQuery test | 2,721 Kb |
Sign-up Card | 2,945 Kb |
Social Icons Transition | 2,054 Kb |
Vertically aligning content | 2,875 Kb |
Interactive Button Editor | 4,062 Kb |
Masked.js | 3,037 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 |
SVG Modified with Query String | Jnowland | 1,663 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Simple yet functional | Matheusxaviersi | 2,025 Kb |
Simple canvas drawing -- simplified lines | Anandthakker | 3,127 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Web Spiral - p5.js | TWAIN | 2,183 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!