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 21 February 2022, Monday.

How do I make an automatic scroll?
  1. Automatic scroll Previews
  2. Automatic scroll HTML Codes
  3. Automatic scroll CSS Codes
  4. Automatic scroll JS Codes
Automatic scroll Previews

Automatic scroll 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 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 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);
  });
  
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.