Smooth Scrolling with jQuery

Developer
Kevin
Size
3,471 Kb
Views
36,432
  1. Smooth Scrolling with jQuery Previews
  2. Smooth Scrolling with jQuery HTML Codes
  3. Smooth Scrolling with jQuery CSS Codes
  4. Smooth Scrolling with jQuery JS Codes

How do I make an smooth scrolling with jquery?

What is a smooth scrolling with jquery? How do you make a smooth scrolling with jquery? This script and codes were developed by Kevin on 24 August 2022, Wednesday.

Smooth Scrolling with jQuery Previews
IQ Test

Smooth Scrolling with jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smooth Scrolling with jQuery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <nav class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse"> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Smooth</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link scroll" href="#top">Home</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#features">Features</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#pricing">Pricing</a> </li> </ul> </div> </div> <!-- /container --> </nav>
</header>
<section class="hero" id="top"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="display-3">I like it smooth</h1> </div> </div> </div>
</section>
<section class="features" id="features"> <div class="container"> <h1 class="mb-5 display-4">Features</h1> <div class="row"> <div class="col-md-4"> <h3>Lorem ipsum dolor sit amet</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="col-md-4"> <h3>Consectetuer adipiscing elit.</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="col-md-4"> <h3>Lorem ipsum dolor sit amet</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>
</section>
<section class="pricing" id="pricing"> <h1 class="mb-5 display-4">Pricing</h1> <div class="container"> <div class="row no-gutters"> <div class="col-md-4"> <div class="card bg-info"> <div class="card-header bg-primary text-white"> Basic </div> <div class="card-block"> <h4 class="card-title">Cool Plan</h4> <p class="card-text"> <ol> <li>Lorem ipsum </li> <li>Aliquam tincidunt</li> <li>Vestibulum auctor.</li> </ol> </p> <a href="#" class="btn btn-primary">Download FREE</a> </div> </div> </div> <div class="col-md-4"> <div class="card featured-price bg-inverse text-white"> <div class="card-header bg-danger text-uppercase"> Most Popular </div> <div class="card-block"> <h4 class="card-title">Awesome Plan</h4> <p class="card-text"> <ol> <li>Lorem ipsum </li> <li>Aliquam tincidunt</li> <li>Vestibulum auctor.</li> </ol> </p> <a href="#" class="btn btn-danger">Buy now</a> </div> </div> </div> <div class="col-md-4"> <div class="card bg-info"> <div class="card-header bg-primary text-white"> Full Deal </div> <div class="card-block"> <h4 class="card-title">Amazing Plan</h4> <p class="card-text"> <ol> <li>Lorem ipsum </li> <li>Aliquam tincidunt</li> <li>Vestibulum auctor.</li> </ol> </p> <a href="#" class="btn btn-primary">Buy now</a> </div> </div> </div> </div> </div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Smooth Scrolling with jQuery - Script Codes CSS Codes

body { padding-top: 3rem;
}
.hero { padding: 20vh 0; background: -webkit-linear-gradient(left, #EECDA3, #EF629F); background: linear-gradient(to right, #EECDA3, #EF629F);
}
.features { padding: 10vh 0; background: #222; color: white;
}
@media (min-width: 768px) { .features { padding: 20vh 0; }
}
.pricing { padding: 10vh 0; text-align: center;
}
@media (min-width: 768px) { .pricing { padding: 20vh 0; }
}
.featured-price { -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 10; background: #222;
}

Smooth Scrolling with jQuery - Script Codes JS Codes

$(document).ready(function() { var scrollLink = $('.scroll'); // Smooth scrolling scrollLink.click(function(e) { e.preventDefault(); $('body,html').animate({ scrollTop: $(this.hash).offset().top }, 1000 ); }); // Active link switching $(window).scroll(function() { var scrollbarLocation = $(this).scrollTop(); scrollLink.each(function() { var sectionOffset = $(this.hash).offset().top - 20; if ( sectionOffset <= scrollbarLocation ) { $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); } }) })
})
Smooth Scrolling with jQuery - Script Codes
Smooth Scrolling with jQuery - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded August 24, 2022
Rating 3
Size 3,471 Kb
Views 36,432
Do you need developer help for Smooth Scrolling with jQuery?

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!

Kevin (kevinpowell) Script Codes
Name
Flexbox navigation bar
Collapsing divs with floats
Very simple jQuery dropdown navigation
CSS Grid Area demo
Non-rectangular sections
Mobile nav v2
Parallax scrolling - one class, multiple divs
Anchors with smooth scrolling
CSS outlines
Margin vs Padding
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!