JQuery Smooth Scroll

Developer
Mike
Size
2,462 Kb
Views
4,048
  1. JQuery Smooth Scroll Previews
  2. JQuery Smooth Scroll HTML Codes
  3. JQuery Smooth Scroll CSS Codes
  4. JQuery Smooth Scroll JS Codes

How do I make an jquery smooth scroll?

What is a jquery smooth scroll? How do you make a jquery smooth scroll? This script and codes were developed by Mike on 01 February 2023, Wednesday.

JQuery Smooth Scroll Previews
IQ Test

JQuery Smooth Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Smooth Scroll</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="header text-center"> <a href="#lorem2" id="anchorId" class="anchor-link">Lorem 2</a> </div> <div class="container"> <h2 class="call-out">Lorem 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cuspiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit?</p> <h2 id="lorem2" class="call-out">Lorem 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit?</p> <h2 class="call-out">Lorem 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quis libero, maiores ullam dolores doloribus voluptatibus perspiciatis ex, amet dicta cumque sapiente aperiam cupiditate odio laborum nihil! Eligendi, fugit?</p> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Smooth Scroll - Script Codes CSS Codes

body p { font-size: 1.5em;
}
.anchor-link { font-size: 5em;
}
.header { height: 400px; margin-bottom: 50px; background-image: linear-gradient(to bottom right, #00e8ff, #29c9ab);
}

JQuery Smooth Scroll - Script Codes JS Codes

 // Smooth scroll to anchor
var page = $('html, body');
$('#anchorId').click(function() { var href = $.attr(this, 'href'); page.animate({ scrollTop: $(href).offset().top }, 1000, function () { window.location.hash = href; }); return false;
});
JQuery Smooth Scroll - Script Codes
JQuery Smooth Scroll - Script Codes
Home Page Home
Developer Mike
Username mikestabile
Uploaded February 01, 2023
Rating 3
Size 2,462 Kb
Views 4,048
Do you need developer help for JQuery Smooth Scroll?

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!

Mike (mikestabile) Script Codes
Name
Scroll to top design 2
Hero with bottom banner
Business Card Sample Using jQuery Flip
Bootstrap Tour Example
Materialize Card
Scroll to top design 1
Styled radio buttons
Bill Pay Intro Carousel
A Pen by Mike
Bill Pay Banner Ad
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!