单击范围元素时，可以平滑滚动到特定的div

Question

我对所有这些都很陌生，所以我可能只是想念一些东西。 但是，我试图在网页底部创建一个箭头，然后滚动到其下方的div。 我阅读了这篇文章，在单击时可以平滑滚动到特定div，但无法为我工作。 我在这里开始了一个小提琴： https : //jsfiddle.net/ConnorBetts/ua4z6x7n/2/ （黑框是箭头的占位符。）

这就是我所拥有的...

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> 

我正在尝试使其与snapchat.com类似。

Answer 1

您需要添加jQuery脚本：

 $(".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>