Easy and Bulletproof ScrollTo Script

Developer
Size
4,111 Kb
Views
36,432

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 Previews

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
Easy and Bulletproof ScrollTo Script - Script Codes
Easy and Bulletproof ScrollTo Script - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 3
Size 4,111 Kb
Views 36,432
Do you need developer help for Easy and Bulletproof ScrollTo Script?

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!

Twikito (Twikito) Script Codes
Create amazing blog posts 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!