如何在编码中正确嵌入这些锚点？

Question

我已经阅读了这篇link关于如何使用锚来实现我所要求的内容。但是，我完全输了。我想知道是否有人可以告诉我我正在寻找并解释它。

Q1 对于我的网站，当用户点击网页＆＃34;联系＆＃34;在导航栏上，我希望用户强制滚动到我的主页网页上的第三部分。我在<section id="contact-me" class="contact_section"></section>之前使用过这样的东西。但是，我如何将其嵌入到我的HTML部分3中并仍然保留类＆＃34; section3＆＃34;。

Q2 如何在第1部分将我的箭头链接到第2部分？这是我的尝试，但是会将您带到一个页面，我希望它强制用户向下滚动到我的网页中的第2部分。<a href = ".section2"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>

Q3

我怎样才能如何将第2部分的箭头连接到第3部分？

我怎样才能如何在第3部分将我的箭头链接到第1部分？

以下是我的编码。

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.navbar.navbar-default {
  background-color: #4D5061;
  height: 10vh;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: right;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown .dropdown-menu {
  background-color: #4D5061;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: #FFFFFF;
  border-radius: 9px;
  transition: all .2s;
}

.navbar.navbar-default ul li a:hover {
  color: white;
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default 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;
  height: 95vh;
}

.section1 {
  height: 100vh;
  text-align: center;
  color: white;
  background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
  background-attachment: fixed;
}

.section2 {
  //height: 95vh;
  background-color: #A59E8C;
  text-align: center;
  color: white;
}

.section3 {
  //height: 95vh;
  background-color: #A59E8C;
  text-align: center;
  color: white;
}

.fa-angle-down {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.fa-angle-up {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.footer {
  height: 5vh;
  background-color: #4D5061;
  text-align: center;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0:
}

h1 {
  font-size: 14pt;
  margin: 0;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
}

＆＃13;

<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">
<link rel="stylesheet" href="css/style.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
      <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#section3">Contact</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>

            <li><a href="#">Separated link</a>
            </li>

            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#contact-me">Contact Me</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>


<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">



  <a href=".section2"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>

</section>

<section class="section3" id="section3">

  <a href="#bs-example-navbar-collapse-1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>

</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

<footer>
  <div class="page">
    <h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您希望自己的链接指向id，而不是类。为您的3个部分添加了与部分编号匹配的ID，并更新了您的链接以引用这些ID。您可以在这些部分上保留现有的类。同时对#contact-me进行了.section3更改，同时将.section3保留在该元素的班级列表中。

body {
  margin: 0;
  padding: 0;
}

.navbar.navbar-default {
  background-color: #4D5061;
  height: 10vh;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: right;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown .dropdown-menu {
  background-color: #4D5061;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: #FFFFFF;
  border-radius: 9px;
  transition: all .2s;
}

.navbar.navbar-default ul li a:hover {
  color: white;
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default 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;
  height: 95vh;
}

.section1 {
  height: 100vh;
  text-align: center;
  color: white;
  background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
  background-attachment: fixed;
}

.section2 {
  //height: 95vh;
  background-color: #A59E8C;
  text-align: center;
  color: white;
}

.section3 {
  //height: 95vh;
  background-color: #A59E8C;
  text-align: center;
  color: white;
}

.fa-angle-down {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.fa-angle-up {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.footer {
  height: 5vh;
  background-color: #4D5061;
  text-align: center;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0:
}

h1 {
  font-size: 14pt;
  margin: 0;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
}

<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">
<link rel="stylesheet" href="css/style.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
      <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#contact-me">Contact</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>

            <li><a href="#">Separated link</a>
            </li>

            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#contact-me">Contact Me</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>


<section id="section1" class="section1">
  <div class="hero"></div>


  <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>

</section>
<section id="section2" class="section2">


  <a href="#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>

</section>

<section id="contact-me" class="contact_section section3">

  <a href="#section1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>

</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

<footer>
  <div class="page">
    <h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
  </div>
</footer>

Answer 2

正如我在评论中所解释的那样，引用页面另一部分的链接通过元素的id属性来实现。您可以在<section>代码上保留相同的类，但必须具有id属性。

要解决第3部分回到第1部分的问题，我刚给第1部分提供了一个ID，并将第3部分中的链接设置为指向该部分。

随意提出任何澄清问题

body {
  margin: 0;
  padding: 0;
}

.navbar.navbar-default {
  background-color: #4D5061;
  height: 10vh;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: right;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown .dropdown-menu {
  background-color: #4D5061;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: #FFFFFF;
  border-radius: 9px;
  transition: all .2s;
}

.navbar.navbar-default ul li a:hover {
  color: white;
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default 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;
  height: 95vh;
}

.section1 {
  height: 100vh;
  text-align: center;
  color: white;
  background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
  background-attachment: fixed;
}

.section2 {
  //height: 95vh;
  background-color: #A59E8C;
  text-align: center;
  color: white;
}

.section3 {
  //height: 95vh;
  background-color: #A59E8C;
  text-align: center;
  color: white;
}

.fa-angle-down {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.fa-angle-up {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.footer {
  height: 5vh;
  background-color: #4D5061;
  text-align: center;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0:
}

h1 {
  font-size: 14pt;
  margin: 0;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
}

<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">
<link rel="stylesheet" href="css/style.css">
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
      <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#section3">Contact</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>

            <li><a href="#">Separated link</a>
            </li>

            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#contact-me">Contact Me</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>


<section id="section1" class="section1">
  <div class="hero"></div>




  <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>

</section>
<section id="section2" class="section2">



  <a href="#section3"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>

</section>

<section class="section3" id="section3">

  <a href="#section1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>

</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<footer>
  <div class="page">
    <h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
  </div>
</footer>