当点击一个跨度元素时，光滑滚动到特定div

Question

我对所有这些都很新颖，所以我可能会错过一些东西。但是，我试图在我的网页底部创建一个箭头，然后滚动到它下面的div。我看过这篇文章Smooth scroll to specific div on click，但无法让它为我工作。我在这里开始一个小提琴：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>