Scroll down button css

HTML
<section> <p>SCROLL DOWN CSS</p> <a href="#" class="scroll-down" address="true"></a> </section> <section class="ok"> <p>OK SCROLL !</p> </section>
CSS
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; } .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); } }
JAVASCRIPT
$(function() { $('.scroll-down').click (function() { $('html, body').animate({scrollTop: $('section.ok').offset().top }, 'slow'); return false; }); });
Expand for more options Login