Anchors with smooth scrolling

Developer
Kevin
Size
2,641 Kb
Views
44,528
  1. Anchors with smooth scrolling Previews
  2. Anchors with smooth scrolling HTML Codes
  3. Anchors with smooth scrolling CSS Codes
  4. Anchors with smooth scrolling JS Codes

How do I make an anchors with smooth scrolling?

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

Anchors with smooth scrolling Previews
IQ Test

Anchors with smooth scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Anchors with smooth scrolling</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="top"></div>
<div class="nav"> <ul> <li><a href="#top" class="scroll">Home</a></li> <li><a href="#about-section" class="scroll">About</a></li> </ul>
</div>
<div class="about" id="about-section"> <div class="slider-image"> <img src="//unsplash.it/300/200" class="left"> <img src="//fillmurray.com/300/200" class="left"> </div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Anchors with smooth scrolling - Script Codes CSS Codes

body { background: #aaa; color: white; font-size: 18px; font-family: sans-serif; margin: 0; background-image: url('//unsplash.it/1600/1200'); background-size: cover;
}
p { margin-top: 0;
}
.left { float: left; margin-right: 1em;
}
#top { padding: 1px;
}
.nav { background: rgba(150, 200, 0, .65); position: fixed; top: 0; left: 0; right: 0; text-align: center;
}
.nav ul { padding: 0; margin: 0; list-style: none;
}
.nav li { display: inline-block; position: relative;
}
.nav li a:hover { background: rgba(0, 0, 0, .15);
}
.nav a { display: block; color: white; text-decoration: none; padding: 20px 40px;
}
.nav li a:hover { background: rgba(0, 0, 0, .15);
}
.about { padding: 100px; background: rgba(100, 200, 10, .76); width: 500px; margin: 1000px auto;
}

Anchors with smooth scrolling - Script Codes JS Codes

$(document).ready(function() { //auto scrolling $('.scroll').click(function(event) { // When someone clicks on something with the class on .scroll event.preventDefault(); // Prevent the default action $('html,body').animate({ // And animate scrollTop: $(this.hash).offset().top }, 1000); // From the link, to the anchor, and take 1000ms })
});
Anchors with smooth scrolling - Script Codes
Anchors with smooth scrolling - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded August 12, 2022
Rating 3
Size 2,641 Kb
Views 44,528
Do you need developer help for Anchors with smooth scrolling?

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
Nav bar with fun hover effect
Simple Jumbotron with BG image
CSS Grid Area demo
Anchors
Awesome Portfolio demo
Background position test
Very simple jQuery dropdown navigation
Explicit and Implicit grid
Some fun button effects
Create amazing marketing copy 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!