Scroll down button 01

<!DOCTYPE html>
<html>
<head>
  <title>SCROLL DOWN CSS | Par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="SCROLL DOWN CSS ">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <section>
        <p>SCROLL DOWN CSS</p>
        <a href="#" class="scroll-down" address="true"></a>
        </section>
        <section class="ok">
        <p>OK SCROLL !</p>
        </section>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>
body {
  background-color: #000;
}

*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
  width: 100%;
  display: table;
  
}
section.ok{
  background-color: #555;
}

p{
  color: white;
  font-family: arial;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
$(function() {
    $('.scroll-down').click (function() {
      $('html, body').animate({scrollTop: $('section.ok').offset().top }, 'slow');
      return false;
    });
});
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style01

Timeline style01

Texte Block Posts Style01

Texte Block Posts Style01

Loading style book loader

Loading style book loader

Input file style02

Input file style02

Input file style01

Input file style01

Image hover Flip Flap Style

Image hover Flip Flap Style

Header Aside Footer Admin

Header Aside Footer Admin

Form login 02

Form login 02

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Blog post card 01

Blog post card 01

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02