ScrollTop
How do I make an scrolltop?
What is a scrolltop? How do you make a scrolltop? This script and codes were developed by Soufiane Abid on 12 October 2022, Wednesday.
ScrollTop - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ScrollTop </title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <div><i class="fa fa-angle-down fa-5x"></i></div> <div><i class="fa fa-arrow-down fa-4x"></i></div> <div><i class="fa fa-arrows-v fa-3x"></i></div> <div><i class="fa fa-angle-up fa-3x"></i></div>
</section>
<!-- Button ScrollTop -->
<div id="top">
<i class="fa fa-angle-double-up"></i>
</div> <script src='https://code.jquery.com/jquery-2.2.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
ScrollTop - Script Codes CSS Codes
/* Reset My page */
*{ margin: 0; padding: 0;
}
/* Star Section Style */
section div:first-child{ background: #cff0da;
}
section div:nth-child(2){ background: #88dba3;
}
section div:nth-child(3){ background: #dadbdb;
}
section div:last-child{ background: #3ac569;
}
/* Star Section Style */
/* button Style */
#top{ font-size: 30px; position: fixed; right:10%; bottom:20px; cursor: pointer; display: none;
}
div i:hover{ color: #5A9367;
}
/* end Button style */
ScrollTop - Script Codes JS Codes
(function($){ 'use stricte'; // Variables var $winHeight = $(window).height(), $scrollTopBtn = $('#top'), $icon = $('section > div i'); // Section Width $('section div').height($winHeight); // Resize Window function $(window).resize(function(){ $('section div').height($winHeight); $icon.css('marginTop', $winHeight - $(this).height() / 2 ); $icon.css('marginLeft', $(window).width() - $(this).width() / 2 ); });
// Scrolling $(window).scroll(function(){ // console.log($(this).scrollTop()); if ( $(this).scrollTop() >= 450 ){ $scrollTopBtn.fadeIn(); }else{ $scrollTopBtn.fadeOut(); } }); $scrollTopBtn.click(function(){ $('html,body').animate({scrollTop: 0},2000); }); // Center icon inside section $icon.css('marginTop', $winHeight - $(this).height() / 2 ); $icon.css('marginLeft', $(window).width() - $(this).width() / 2 );
}(jQuery));
Developer | Soufiane Abid |
Username | SoufianeAbid |
Uploaded | October 12, 2022 |
Rating | 3 |
Size | 2,229 Kb |
Views | 28,336 |
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 |
TTT Plans Pricing Table | 3,101 Kb |
Sandal Adidas PURE CSS | 1,688 Kb |
Small UnderLine | 1,488 Kb |
Flat accordion | 3,349 Kb |
Canvas loading | 1,829 Kb |
One click to copy | 2,034 Kb |
Responsive pricing table CSS3 | 4,837 Kb |
Push Over Menu | 4,275 Kb |
Jump loading | 1,796 Kb |
Samatic | 1,776 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 |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Sticky div | Kaslab | 2,225 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Lightrays v2 | Sinthetyc | 2,903 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!