Automatic scroll

Developer
Sander
Size
4,042 Kb
Views
8,096
  1. Automatic scroll Previews
  2. Automatic scroll HTML Codes
  3. Automatic scroll CSS Codes
  4. Automatic scroll JS Codes

How do I make an automatic scroll?

A simple jquery script that gives you a clean animated scroll if you click on a button.. What is a automatic scroll? How do you make a automatic scroll? This script and codes were developed by Sander on 18 December 2022, Sunday.

Automatic scroll Previews
IQ Test

Automatic scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Automatic scroll</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <div class="top"> <ul class="navigation"> <li><a class="btnHome" href="#" title="">Home</a></li> <li><a class="btnAbout" href="#" title="">About</a></li> <li><a class="btnPortfolio" href="#" title="">Portfolio</a></li> <li><a class="btnContact" href="#" title="">Contact</a></li> </ul>
</div>
<div class="header">
</div>
<div id="home" class="wrapper"> <h2 class="articleTitle">Home</h2> <h3 class="articleSubTitle">Phasellus suscipit cursus quam</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper metus in massa fermentum, non laoreet turpis volutpat. In a leo ac est lobortis bibendum. Nullam condimentum leo sem. Ut ultrices posuere interdum. Ut malesuada libero mattis varius semper. Curabitur facilisis nulla id nibh fringilla varius. Aenean in placerat sem.</p> <p>Praesent dictum euismod velit, ac varius elit. Suspendisse eget fringilla velit. Etiam magna orci, condimentum ut enim ut, sodales consectetur ligula. Suspendisse adipiscing tortor quis vehicula porttitor. Phasellus suscipit cursus quam, sit amet vehicula felis eleifend pellentesque. Nam gravida ultrices adipiscing. Nullam varius ornare augue, eu egestas massa consectetur ut. Integer pellentesque ipsum in tellus accumsan, non pretium ligula tempus. Aenean molestie ante quis commodo sodales. Integer id facilisis mauris. In nec magna sed turpis feugiat mollis eu at eros. Aliquam erat volutpat.</p>
</div>
<div id="about" class="wrapper"> <h2 class="articleTitle">About</h2> <h3 class="articleSubTitle">Aenean eget viverra odio</h3> <p>Fusce quis interdum arcu, dapibus scelerisque lectus. Cras lectus tortor, aliquam vitae nulla eget, molestie sollicitudin lectus. Cras tristique quam a malesuada iaculis. Ut vel ultrices tellus. Nunc varius nunc ut metus porta elementum. Sed vitae leo lobortis, sodales justo ut, ultricies nibh. Praesent ac diam adipiscing, vehicula tortor ac, adipiscing ligula.</p>
<p>Donec ac ligula nec diam vulputate sodales sed ut nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean eget viverra odio. Ut convallis massa sed sapien suscipit hendrerit eget in odio. Sed mollis mi at massa rutrum, ac lobortis eros porta. In sodales dui at tempor varius. Proin euismod orci felis, varius tempor lacus bibendum eu. Maecenas faucibus nec nisl vel semper. Suspendisse at erat et metus interdum pellentesque nec sed justo. Vestibulum mauris augue, ultrices quis iaculis vitae, ultricies ac ligula. Ut iaculis leo justo, non dictum felis dapibus eu. Fusce pharetra porta nulla vel consectetur. Aliquam erat volutpat.</p>
</div>
<div id="portfolio" class="wrapper"> <h2 class="articleTitle">Portfolio</h2> <h3 class="articleSubTitle">Aenean eget viverra odio</h3> <p>Fusce quis interdum arcu, dapibus scelerisque lectus. Cras lectus tortor, aliquam vitae nulla eget, molestie sollicitudin lectus. Cras tristique quam a malesuada iaculis. Ut vel ultrices tellus. Nunc varius nunc ut metus porta elementum. Sed vitae leo lobortis, sodales justo ut, ultricies nibh. Praesent ac diam adipiscing, vehicula tortor ac, adipiscing ligula.</p>
<p>Donec ac ligula nec diam vulputate sodales sed ut nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean eget viverra odio. Ut convallis massa sed sapien suscipit hendrerit eget in odio. Sed mollis mi at massa rutrum, ac lobortis eros porta. In sodales dui at tempor varius. Proin euismod orci felis, varius tempor lacus bibendum eu. Maecenas faucibus nec nisl vel semper. Suspendisse at erat et metus interdum pellentesque nec sed justo. Vestibulum mauris augue, ultrices quis iaculis vitae, ultricies ac ligula. Ut iaculis leo justo, non dictum felis dapibus eu. Fusce pharetra porta nulla vel consectetur. Aliquam erat volutpat.</p>
</div>
<div id="contact" class="wrapper"> <h2 class="articleTitle">Contact</h2> <h3 class="articleSubTitle">Phasellus suscipit cursus quam</h3> <p>Nulla rhoncus lobortis odio eget commodo. Nunc rutrum accumsan lacus, sit amet ultricies est dignissim a. Ut tincidunt libero et tellus porttitor convallis. Phasellus venenatis nulla sem, et sodales ante vestibulum dapibus. Fusce sed nulla ipsum. Praesent id tristique enim, sit amet scelerisque erat. Nunc eu lorem feugiat, lacinia nisi nec, mattis nulla. In tortor ipsum, mattis at elit nec, ornare ultricies dui. Maecenas vulputate dictum egestas. Proin purus ipsum, blandit sit amet sodales nec, convallis non eros. Proin bibendum pretium euismod. Cras tincidunt magna sapien, vitae gravida turpis viverra nec. Duis vitae leo vel sapien tincidunt porta. Curabitur nunc mi, luctus non dolor quis, accumsan tempus tellus. Nam ut vehicula urna. Suspendisse lectus massa, laoreet ac aliquam id, varius vel velit.</p>
<p>Maecenas feugiat, odio vitae vulputate aliquam, felis arcu accumsan dolor, in pretium augue augue imperdiet metus. Sed nec viverra justo. Ut scelerisque lacinia mattis. Cras molestie, nisl eu ullamcorper mattis, mauris nisi imperdiet arcu, vitae tempor orci odio et nibh. Proin ligula quam, suscipit at sapien et, venenatis elementum felis. Sed lacus neque, tincidunt vel dapibus at, dapibus sed mi. Morbi accumsan bibendum tellus laoreet ultrices. Nunc aliquam eu eros in rhoncus. Nulla facilisi. Vivamus nisl nibh, gravida suscipit semper sed, mattis vitae sapien. Aliquam quis neque interdum, pulvinar urna at, pretium risus. Nam ac felis ac arcu accumsan mattis. Donec sed tellus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc venenatis posuere quam eget sollicitudin. Donec neque nisi, dignissim sit amet dui fermentum, gravida malesuada odio.</p>
</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>

Automatic scroll - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700);
@import url(https://fonts.googleapis.com/css?family=Cabin+Condensed:400,500,600,700);
/*
.fonts { font-family: 'Josefin Slab', serif; font-family: 'Cabin Condensed', sans-serif;
}
*/
body { font-family: 'Cabin Condensed', sans-serif; font-size: 16px; letter-spacing: 1px; line-height: 22px; color: #fff; background: #e0e0e0;
}
p { margin-top: 1em;
}
.articleTitle { margin-bottom: 0.2em; font-size: 2.5em; font-weight: 700; text-transform: uppercase; line-height: 1em;
}
.articleSubTitle { margin-bottom: 1em; font-size: 1.2em; font-weight: 700; text-transform: uppercase; line-height: 1em;
}
.top { position: fixed; width: 100%; height: 50px; padding: 0; margin: 0; background: #f0f0f0; border-bottom: solid 2px #f5f5f5; z-index: 100; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
}
.navigation { width: 640px; margin: 0 auto;
}
.navigation li { float: left;
}
.navigation a { display: block; padding: 0 20px; line-height: 50px; text-transform: uppercase; text-decoration: none; color: #333;
}
.navigation a:hover { background: #dadada;
}
.header { height: 50px;
}
.wrapper { width: 600px; padding: 40px; margin: 20px auto; background: #fff;
}
#home { background: #22884F;
}
#about { background: #216278;
}
#portfolio { background: #562781;
}
#contact { background: #B22D47;
}

Automatic scroll - Script Codes JS Codes

$(document).ready(function(){ $(".btnHome").click(function() { $('html, body').stop(true, true).animate({ scrollTop: $("#home").offset().top -70 }, 1000); }); $(".btnAbout").click(function() { $('html, body').stop(true, true).animate({ scrollTop: $("#about").offset().top -70 }, 1000); }); $(".btnPortfolio").click(function() { $('html, body').stop(true, true).animate({ scrollTop: $("#portfolio").offset().top -70 }, 1000); }); $(".btnContact").click(function() { $('html, body').stop(true, true).animate({ scrollTop: $("#contact").offset().top -70 }, 1000); });
});
Automatic scroll - Script Codes
Automatic scroll - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 3
Size 4,042 Kb
Views 8,096
Do you need developer help for Automatic 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!

Sander (skeurentjes) Script Codes
Name
Parallax scrolling background
Sidenavigation
Dropdown navigation
Pure CSS dropdown navigation
Sticky widget
Card flip
Horizontal navigation
Image clip path mask
Side navigation
3D box
Create amazing captions 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!