<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="scro"> <a href="#" class="scroll-down" address="true"></a> </div>

*, :after, :before { box-sizing: border-box; margin: 0; padding: 0; } section { height: 100vh; width: 100%; display: table; } .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 black; 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; } .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 black; 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); } } .scro { margin: 124px }

$(function() { $('.scroll-down').click (function() { $('html, body').animate({scrollTop: $('section.ok').offset().top }, 'slow'); return false; }); });