Smooth scroll to specific div when clicking a span element

Question

I'm pretty new to all of this, so I might just be missing something. However, I'm trying to create an arrow at the bottom of my webpage the then scrolls to the div below it. I read this post Smooth scroll to specific div on click but couldn't get it to work for me. I started a fiddle here: https://jsfiddle.net/ConnorBetts/ua4z6x7n/2/ (the black box is a place holder for the arrow.)

Here's what I have...

HTML:

 html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #hero-text { text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); color: white; font-family: stevie-sans, sans-serif; font-style: normal; font-weight: 500; font-size: 40px; text-shadow: 0px 0px 3px rgba(0, 0, 0, .5); padding-left: 20px; padding-right: 20px; } #homehero { display: block; width: 100%; height: 100%; background-image: linear-gradient(130deg, rgb(249, 204, 0) 0%, rgb(249, 185, 60) 100%); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .homepage-arrow { position: absolute; width: 50px; height: 13px; background: url("images/arrow.svg") no-repeat center center; background-color: #000; background-size: 50px 13px; bottom: 20px; left: 50%; margin-left: -25px; padding: 5px; box-sizing: content-box; display: block; -webkit-transform: translateZ(0); transform: translateZ(0); filter: drop-shadow( 0px 0px 5px rgba(0, 0, 0, .3)); } .bigdivlight { margin: auto; padding-top: 100px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; color: #303030; max-width: 1000px; text-align: center; } 

 <div id="homehero"> <p id="hero-text">Test</p> <span href="#about" class="homepage-arrow" alt="arrow"></span> </div> <div id="about" class="bigdivlight"> <h3>Hey,</h3> <p class="darktext">I'm some example text</p> </div> 

I am trying to have it work similar to snapchat.com .

Answer 1

You need to add jQuery script:

 $(".homepage-arrow").click(function() { $('html,body').animate({ scrollTop: $("#about").offset().top}, 'slow'); }); 

 html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #hero-text { text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); color: white; font-family: stevie-sans, sans-serif; font-style: normal; font-weight: 500; font-size: 40px; text-shadow: 0px 0px 3px rgba(0, 0, 0, .5); padding-left: 20px; padding-right: 20px; } #homehero { display: block; width: 100%; height: 100%; background-image: linear-gradient(130deg, rgb(249, 204, 0) 0%, rgb(249, 185, 60) 100%); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .homepage-arrow { position: absolute; width: 50px; height: 13px; background: url("images/arrow.svg") no-repeat center center; background-color: #000; background-size: 50px 13px; bottom: 20px; left: 50%; margin-left: -25px; padding: 5px; box-sizing: content-box; display: block; -webkit-transform: translateZ(0); transform: translateZ(0); filter: drop-shadow( 0px 0px 5px rgba(0, 0, 0, .3)); } .bigdivlight { margin: auto; padding-top: 100px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; color: #303030; max-width: 1000px; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="homehero"> <p id="hero-text">Test</p> <span href="#about" class="homepage-arrow" alt="arrow"></span> </div> <div id="about" class="bigdivlight"> <h3>Hey,</h3> <p class="darktext">I'm some example text</p> </div>