あなたはそれを達成するためにJavaScriptなどのプログラミング言語を使用する必要はありません、あなたはHTMLを使用することができます。1.イベントをクリックして強制的にスクロールダウンできるようにするにはどうすればよいですか？
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
セクションまで戻って、ユーザを持参するセクション3の下部中央にある矢印を追加アンカーリンクと呼ばれるものがあります。
基本的に、あなたが降ろしたい要素にIDを与えます。その場合、ID名の前に番号の付いたIDと等しいhrefを持つリンクを作成するだけです。たとえば、あなたがID「TT」とdiv要素に到達するためにHTMLドキュメントを望んでいた場合：あなたは、矢印のイメージを持っていた場合
<a href="#tt"> Link</a> --> Will send the browser down to the div with an id "tt"
、あなただけのイメージ、すなわち周りのアンカーリンクをラップすることができます：
<a href="#tt"> <img src = "arrow.jpg"> </img> </a>
下に追加関連するコード：
私はクラスsection2のとI要素にID section2のを追加し、ちょうどアンカータグとそれを囲みます。私はセクション3で仮定しています。その部分のリンクも追加されました。
あなたは最後の部分に上向きの矢印を描く必要がありますが、ハイパーリンクに同じスタイルをコピーするだけです。上向きの矢印の周りにアンカーリンク(<a> </a>)をラップし、それに "＃section1"というhref属性を付け、section1をクラス名 "section1"のセクションのIDとして渡します。
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li a{
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
nav ul li{
padding-bottom:6px;
position:relative;
display: inline-block;
}
nav ul li:after{
content:'';
position:absolute;
right:50%;
bottom:0;
left:50%;
height:3px;
background-color:red;
border-radius:9px;
transition:all .2s;
}
nav ul li:hover:after{
right:0;
left:0;
}
a:hover{
color:red;
text-decoration:none;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:93vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
@media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
}
</style>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Units</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#contact-me">Contact Me</a></li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<a href= "#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section class="section2" id = "section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message.</p>
</div>
</div>
</div>
</div>
<a href = "#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
私は自分のコード内でこれを実装しようとしました。しかし、それは動作していないようです。おそらく私はそれを間違った場所に追加している可能性がありますか？あなたは私がどこに行ってください私を示すことができる任意のチャンス？ –
これはHTMLだけで行うことができます。ルックアップアンカーリンク。 http://codepen.io/anon/pen/QpEjQx –