<分区>
标签 javascript html css
<分区>
我已经在这个网站上工作了一段时间，我遇到了一个我最近才注意到的问题。如果您运行下面的代码，您会发现一个滚动箭头，您可以单击它来引导您进入下一部分。但是，单击此按钮后，该部分会立即传输。我希望能够单击它并顺利向下滚动。我之前偶然做了这个效果，我一直无法弄清楚我做了什么。如果有人能告诉我怎么做，我将不胜感激。
谢谢， 约翰
#section01 {
background: url(http://wallpapercave.com/wp/LekAYO3.jpg) center center / cover no-repeat;
}
#section02 {
background: url(http://wallpapercave.com/wp/8iAP1eI.jpg) center center / cover no-repeat;
}
.arrow a {
position: absolute;
bottom: 50px;
left: 50%;
z-index: 8;
display: inline-block;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font: normal 400 20px/1'Josefin Sans', sans-serif;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
/*
.arrow a:hover {
opacity: .5;
}
*/
#section01 a,
#section02 a,
#section03 a,
#section03 a,
#section04 a,
#section05 a,
#section06 a {
padding-top: 60px;
}
/* WHITE ARROW */
#section01 a span,
#section04 a span,
#section05 a span,
#section06 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}
/* BLACK ARROW */
#section02 a span,
#section03 a span,
#section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid black;
border-bottom: 1px solid black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb01 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb01 {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}<section id="section01" class="arrow" style="background-attachment: fixed;">
<h1 class="main">Welcome</h1>
<h5 class="main"> <br> <br> <br> <br> A Website by John Ta </h5>
<a href="#section02"><span></span>Scroll</a>
</section>
<!-- END SECTION01 -->
<section id="section02" class="arrow" style="background-attachment: fixed;">
<h3 class="main" style="color: black;
">Filler?</h3>
<h5 class="main" style="color: black;"> <br> <br> <br> <br> Filler</h5>
<a href="#section03" style="color: black;"><span></span>Scroll</a>
</section>
<!-- END SECTION02 -->最佳答案
#anchors 之间的跳转由浏览器本身处理，而不是 CSS 转换，因此除非您正在寻找涉及容器元素和绝对定位的创意(并且可能有些困惑)解决方法，否则唯一影响浏览器滚动的方法是使用 JavaScript。
您可以使用一些现有的库，例如 Chris Ferdinandi 的 smooth-scroll ，或者您可以尝试用一些 help 编写自己的.
关于javascript - 单击 "scroll"箭头时的转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39480926/