<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="scroll"> <a href="#footerSection"><i class="fa fa-long-arrow-up" aria-hidden="true"></i></a> </div>

.scroll { display: flex; align-items: center; justify-content: center; /* margin-top: -50px; */ z-index: 9; position: absolute; width: auto; right: 44px; bottom: 24px; } .scroll a { width: 84px; height: 85px; border-radius: 100%; display: flex; align-items: center; justify-content: center; } .scroll-down { text-align: center; -webkit-transition: all .6s cubic-bezier(0.19, 1, .22, 1); -moz-transition: all .6s cubic-bezier(0.19, 1, .22, 1); -o-transition: all .6s cubic-bezier(0.19, 1, .22, 1); transition: all .6s cubic-bezier(0.19, 1, .22, 1); -webkit-animation: bounce 2s infinite; -moz-animation: bounce 2s infinite; -o-animation: bounce 2s infinite; animation: bounce 2s infinite; }