Question

在第3部分的底部中心添加一个箭头，使用户返回第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>

Answer 1

您不必使用JavaScript等编程语言来实现它，您可以将HTML与所谓的锚链接一起使用。

基本上你会给你想要归结的元素一个id。然后，您只需编写一个href等于id的链接，并在id名称前面加上数字符号。例如，如果您希望html文档到达id为“tt”的div：

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

在下面添加了相关代码：

我将id section2添加到带有class section2的i元素中，然后用anchor标记将其包围起来。我在第3节假设，你的意思是id与我联系的部分。还添加了该部分的链接。

您将不得不自己在最后一部分上绘制向上箭头，但只需为超链接复制相同的样式。将锚链接(<a> </a>)包裹在向上箭头周围，并为其指定一个“＃section1”的href属性，并将section1作为类名为“section1”的节的id。

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <title>Liam Docherty | London Web Developer &amp; 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>

如何让用户能够单击某个事件以强制他们向下滚动？

1 个答案: