One-page Navigation scroll plug-in

Developer
Jimmy Van Der Sleen
Size
3,677 Kb
Views
6,072
  1. One-page Navigation scroll plug-in Previews
  2. One-page Navigation scroll plug-in HTML Codes
  3. One-page Navigation scroll plug-in CSS Codes
  4. One-page Navigation scroll plug-in JS Codes

How do I make an one-page navigation scroll plug-in?

A plug-in for simple one-page navigation with scrolling . What is a one-page navigation scroll plug-in? How do you make a one-page navigation scroll plug-in? This script and codes were developed by Jimmy Van Der Sleen on 04 January 2023, Wednesday.

One-page Navigation scroll plug-in Previews
IQ Test

One-page Navigation scroll plug-in - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title> One-page Navigation scroll plug-in</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav role='navigation'> <ul> <li><a href="#home" class="active">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#clients">Clients</a></li> <li><a href="#contact">Contact Us</a></li> </ul>
</nav>
<div id="wrapper"> <section id="home">HOME</section> <section id="about">ABOUT</section> <section id="clients">CLIENTS</section> <section id="contact">CONTACT</section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

One-page Navigation scroll plug-in - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500);
* { box-sizing: border-box;
}
body { font-family: 'Fira Sans', sans-serif; font-weight: 300; height: 100%; min-height: 100%;
}
#wrapper { padding-top: 50px;
}
#wrapper:after { content: ''; display: block; clear: both;
}
section { width: 100%; height: 100vh; float: left; background-color: #2196F3; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 3em;
}
section:nth-child(2) { background: #B6B6B6;
}
section:nth-child(3) { background: #1976D2;
}
section:nth-child(4) { background: #607D8B;
}
nav { position: fixed; top: 0px; width: 100%; height: 50px; background: #ccc; text-align: center; line-height: 24px; box-shadow: 0px 0px 10px #333; padding-top: 12px;
}
nav li { display: inline-block; margin-right: 20px;
}
nav li:last-child { margin-right: 0px;
}
nav li a { font-size: 1.2em; text-decoration: none; color: #727272; padding: 4px 10px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; border-bottom: 7px solid #ccc;
}
nav li a.active, nav li a:hover { border-bottom: 7px solid #1976D2; padding: 4px 10px;
}

One-page Navigation scroll plug-in - Script Codes JS Codes

$.fn.pageScroller = function( options ){	var settings = $.extend({	nav:	$(this),	links:	$(this).find('a'),	navActiveClass:	'active',	scrollContainer:	$('html, body'),	scrollSpeed:	1500,	section:	$('section'),	navHeight:	$(this).outerHeight()	}, options);	settings.links.each(function(){	var link = $(this),	href = link.attr('href'),	target = $(href);	link.on('click', function( e ){	e.preventDefault();	settings.links.removeClass(settings.navActiveClass);	link.addClass(settings.navActiveClass);	settings.scrollContainer.stop().animate({	scrollTop: target.offset().top - settings.navHeight	}, settings.scrollSpeed);	});	});	$(window).on('scroll', function(){	var wScroll = $(window).scrollTop() + settings.navHeight;	settings.section.each( function( index ) {	var id = $(this).attr('id'),	top = $(this).offset().top,	secHeight = $(this).outerHeight();	if ( top <= wScroll && (top + secHeight) > wScroll) {	settings.links.removeClass(settings.navActiveClass);	settings.nav.find('a[href="#'+ id +'"]').addClass(settings.navActiveClass);	}	});	});
};
$(document).ready(function(){	$('nav').pageScroller({	// nav: $(this),	default - Your navigation	// links: $(this).find('a'),	default - The links with the # to scroll to	// scrollContainer: $('html, body'),	default - The container you want to scroll	// scrollSpeed:	1500,	//default - 1500	// section: $('section'),	default - The elements you want to scroll to with the same hash # as the links	// navHeight: $(this).outerHeight	default - The height of the navigation	// navActiveClass:	'active',	default - Active class name op links	});
});
One-page Navigation scroll plug-in - Script Codes
One-page Navigation scroll plug-in - Script Codes
Home Page Home
Developer Jimmy Van Der Sleen
Username sjimster
Uploaded January 04, 2023
Rating 3
Size 3,677 Kb
Views 6,072
Do you need developer help for One-page Navigation scroll plug-in?

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!

Jimmy Van Der Sleen (sjimster) Script Codes
Name
SCSS BEM Tabs system
Custom GoogleMaps
Profile Card Envato Remix Challenge
PreLoad page
Simple image slider
Svg loading circle
Css 3D Cube try-out
Scroll Animations CSS3 and SCSS
List 3d scroll
CountingLikes
Create amazing SEO content 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!