Easy and Bulletproof ScrollTo Script
How do I make an easy and bulletproof scrollto script?
Just another ScrollTo JS script, easy to use, just what it needs.. What is a easy and bulletproof scrollto script? How do you make a easy and bulletproof scrollto script? This script and codes were developed by Twikito on 11 September 2022, Sunday.
Easy and Bulletproof ScrollTo Script - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Easy and Bulletproof ScrollTo Script</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background:#BADA55; font-size:2em; line-height:1.4em; color:#fff; }
nav { position:fixed; top:3%; left:0; right:0; text-align:center; }
a { display:inline-block; padding:0 .5em; border-radius:5px; background:rgba(0,0,0,.3); color:#fff; text-decoration:none; transition:all 150ms ease-in-out; }
a.active,a:hover,a:focus { background:rgba(0,0,0,.6); }
article { padding:10% 20%; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav role="navigation"> <a href="#top">top</a> <a href="#target1">target 1</a> <a href="#target2">target 2</a> <a href="#target3">target 3</a> <a href="#target4">target 4</a>
</nav>
<article id="top" class="anchor"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed justo enim. Proin faucibus nisl leo, ut lacinia est rhoncus at. Mauris viverra ligula nec arcu tincidunt elementum. Suspendisse non elit nibh. Nulla rhoncus nisi sem, id venenatis lorem sodales vel. Nam pharetra libero at neque malesuada, sed placerat magna fermentum. Ut iaculis luctus sapien, fringilla tempus tortor bibendum sollicitudin. Ut at fringilla sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ac aliquet sapien. In nec viverra felis. Sed varius, velit ac ullamcorper porta, nisi justo vulputate urna, eu fermentum est magna quis nisi. Morbi arcu elit, tempor eu enim in, ornare mattis felis.
</article>
<article id="target1" class="anchor"> Sed dictum at lacus nec commodo. Curabitur imperdiet sapien ut nisi interdum vulputate. In id consequat diam. Maecenas interdum suscipit turpis a interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut feugiat massa varius facilisis venenatis. Suspendisse potenti.
</article>
<article id="target2" class="anchor"> Ut mollis, ligula quis scelerisque euismod, ligula ligula tempus sapien, sit amet semper sapien arcu quis felis. Sed feugiat, ante et mollis lobortis, neque diam dignissim ligula, eget hendrerit purus diam et quam. Curabitur laoreet risus ac cursus gravida. Aliquam lacus erat, rutrum non odio eget, dignissim gravida erat. Quisque libero nunc, fringilla quis varius et, mollis eu purus. Ut at sem quam. Aenean hendrerit diam vel ipsum imperdiet, id adipiscing elit commodo. Quisque sed velit at quam congue placerat. Ut mollis tristique varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, nisi a convallis pretium, libero ante feugiat erat, nec venenatis massa dolor id risus. Sed diam est, auctor quis iaculis nec, malesuada ac urna. Duis ut turpis tincidunt, varius massa bibendum, aliquam odio. Maecenas in lacinia sapien.
</article>
<article id="target3" class="anchor"> Pellentesque nec neque imperdiet, ornare orci quis, pulvinar sem. Suspendisse interdum laoreet eros eget fermentum. Aenean ultrices tincidunt enim, vel consectetur erat porta eget. In a posuere nisl. Aenean consectetur venenatis orci, a ultricies nulla aliquam eu. Aenean hendrerit pretium sem eget ullamcorper. In at feugiat libero. Aliquam feugiat justo a sagittis blandit. Quisque in eleifend augue. Aliquam ac nibh massa. Nulla vehicula in metus vel gravida. Praesent quis justo ut enim gravida faucibus ac id risus. Aenean tincidunt ultricies sapien, vitae pulvinar risus porta sed. Etiam ac consectetur libero, sed varius orci.
</article>
<article id="target4" class="anchor"> Maecenas nisi tellus, imperdiet sit amet sem a, lacinia auctor enim. Praesent enim dolor, tempus quis luctus id, blandit non massa. Pellentesque sodales ante ut mattis placerat. Quisque dictum, lorem quis convallis tincidunt, sapien dui dignissim nisl, eu consectetur risus lectus molestie nisl. Donec molestie augue lectus, eu semper sem convallis vel. Etiam faucibus elit blandit risus hendrerit adipiscing. Praesent vel mattis erat, rutrum vehicula arcu.
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Easy and Bulletproof ScrollTo Script - Script Codes CSS Codes
body { background:#BADA55; font-size:2em; line-height:1.4em; color:#fff; }
nav { position:fixed; top:3%; left:0; right:0; text-align:center; }
a { display:inline-block; padding:0 .5em; border-radius:5px; background:rgba(0,0,0,.3); color:#fff; text-decoration:none; transition:all 150ms ease-in-out; }
a.active,a:hover,a:focus { background:rgba(0,0,0,.6); }
article { padding:10% 20%; }
Easy and Bulletproof ScrollTo Script - Script Codes JS Codes
$(function() { // Extract from jQuery Easing v1.3 jQuery.extend( jQuery.easing,{ easeInOutQuint: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; } }); // Scroll $("a[href^='#']").click(function(e){ e.preventDefault(); var anchor = this.hash; if(anchor === ""){ return false; } // Add exceptions here $('html,body').stop().animate({'scrollTop':Math.ceil($(anchor).offset().top)},1000,'easeInOutQuint',function(){anchor=="#top"?window.location.hash='':window.location.hash=anchor;}); }); // Indicate current scroll position on menu item $(window).on("load scroll",function(event) { $(".anchor").each(function(index) { if($(window).scrollTop() >= $(this).offset().top && $(window).scrollTop() < ($(this).offset().top + $(this).outerHeight())){ var anchor = $(this).attr('id'); var menuItem = $("[role='navigation']").find("[href='#"+anchor+"']"); if(!menuItem.is(".active")){ // console.log(anchor); $("[role='navigation'] .active").removeClass('active'); menuItem.addClass('active'); } } }); });
});
// Another Pen? codepen.io/Twikito
Developer | Twikito |
Username | Twikito |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 4,111 Kb |
Views | 36,432 |
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 |
Beautiful Textual Map of the USA with CSS | 7,816 Kb |
Full page table inside the grid | 1,864 Kb |
Picture hover effect with pseudo-elements | 2,749 Kb |
CSS3 Box Shadows Effects | 2,193 Kb |
Beautiful Textual Map of French towns with CSS | 6,387 Kb |
Menu item 3D effect on hover with only css | 2,710 Kb |
Item menu effect with pseudo-element | 2,602 Kb |
Easy and Bulletproof ScrollTo Script | 4,111 Kb |
Summary with pseudo-element | 2,971 Kb |
Input awesome effect on focus with only css | 3,789 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 |
Minimelephant | Smashlee | 2,507 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Resize image | Happyhj | 1,892 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Parallax.js | Zmeeey5 | 2,330 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 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!