einen Pfeil nach oben auf der unteren Mitte des 3 Abschnitts fügen Sie den Benutzer zurück zu bringen bis zu Abschnitt 1.Wie kann ich den Benutzer dazu bringen, auf ein Ereignis zu klicken, um zu verhindern, dass es herunterscrollt?
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
Sie haben eine Programmiersprache nicht verwenden wie JavaScript, es zu erreichen, können Sie HTML mit sogenannten Ankerlinks.
Im Wesentlichen würden Sie eine ID zu dem Element geben, das Sie heruntergebracht werden sollen. Sie würden dann einfach einen Link mit einem href schreiben, der der ID mit dem Nummernzeichen vor dem ID-Namen entspricht. Zum Beispiel, wenn Sie das HTML-Dokument zu erreichen, die div mit der ID „tt“ wollten:
<a href="#tt"> Link</a> --> Will send the browser down to the div with an id "tt"
Wenn Sie ein Bild von einem Pfeil haben, konnte man nur den Anker Link um das Bild also wickeln:
<a href="#tt"> <img src = "arrow.jpg"> </img> </a>
Added entsprechender Code unten:
ich habe die ID section2 zum i-Elemente mit der Klasse section2 und umgab sie nur mit dem Anker-Tag. Ich nehme an, dass Sie in Abschnitt 3 den Abschnitt mit der ID contact-me gemeint haben. Der Link für diesen Teil wurde hinzugefügt.
Sie müssen den Pfeil nach oben auf dem letzten Teil selbst zeichnen, aber kopieren Sie einfach den gleichen Stil für den Hyperlink. Wickeln Sie den Ankerlink (<a> </a>) um den Pfeil nach oben und geben Sie ihm ein href-Attribut "# section1" und setzen Sie section1 als ID für den Abschnitt mit dem Klassennamen "section1".
<!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>
Ich habe versucht, dies in meinem Code zu implementieren. Es scheint jedoch nicht zu funktionieren. Möglicherweise könnte ich es an der falschen Stelle hinzufügen? Könntest du mir bitte zeigen, wohin es geht? –
Dies kann mit nur HTML erfolgen. Nachschlagen Links. http://codepen.io/anon/pen/QpEjQx –