Question

我正在建立一个网站（brickman.glitch.me），并具有滚动按钮。如何使它向下滚动到另一个页面？

我尝试使用section标签，但是我并不是最有经验的人，因此我陷入了困境。

<section class="company-heading intro-type" id="parallax-one">
  <div class="container">
    <div class="row product-title-info">
      <div class="col-md-12">
        <a class="ct-btn-scroll ct-js-btn-scroll" href="#section2"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
      </div>
    </div>
  </div>
  <div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/anchor/company-hero2.jpg);"></div>
</section>
<div class="main">
  <section id="section2">
    <div class="container jumbo">
      <div class="jumbotron">
        <p1>test</p1>

我要制作它，以便它向下滚动到页面具有不同背景等的页面，因此它看起来像是另一个页面。我有一个朋友网站（questallation.glitch.me）上的示例，该按钮向下滚动。我想尝试做类似的事情。有帮助吗？

谢谢。

Answer 1

要自动滚动到另一部分，可以使用href =“ x”，其中x是要滚动到的部分的ID。

这是一个小例子：

<div style="background-color: green;height: 2000px">
  <a href="#next-section">Hello</>
</div>
<div id="next-section" style="background-color: red; height: 2000px">
  &nbsp;
</div>

Answer 2

您看过scroll-behavior: smooth吗？没有iOS的Safari支持，但是有polyfill。

来自MDN

scroll-behavior CSS属性设置滚动行为导航或CSSOM滚动触发滚动时显示 API。

body {
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;  
}

nav {
  background-color: #000;
  display: block;
  padding: 1em 0;
  text-align: center;
}

nav a {
  color: #fff;
  margin: 0 1em;
  text-decoration: none;
}

.scrolling-box {
  background-color: #eaeaea;
  display: block;
  flex-grow: 1;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-align: center;
  width: 100vw;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

<nav>
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
</nav>

<div class="scrolling-box">
  <section id="1">Section 1</section>
  <section id="2">Section 2</section>
  <section id="3">Section 3</section>
</div>

jsFiddle

Answer 3

Ciao

我处理了您的原始源代码，因此此简单的解决方案完全基于您的示例。顺便说一句，它也可以在手机上使用。我从您朋友的网站上获取了部分内容，您可以放任何东西

<html lang="en">
<head>
    <title>Brickman Development: Work In Progress</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrickpfp.png?1553388536776" type="image/x-icon">
</head>

<body>
<div style="width: 100%; height: 100%; background: url('https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrick.png?1553389376285'); background-position: 48% 41%; position:relative;">
    <h1 class="line-1 anim-typewriter">
    <mark>Brickman Development: Work In Progress</mark>
    </h1>

    <section class="company-heading intro-type" id="parallax-one">
    <div class="parallax" id="parallax-cta" style="background-image: url('https://www.solodev.com/assets/anchor/company-hero2.jpg');">
    </div>
    <div class="container">
        <div class="row product-title-info">
            <div style="background: #191a1d; position: absolute; bottom: 0; left: 50%" class="col-md-12">
            <a class="ct-btn-scroll ct-js-btn-scroll" href="#information"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
            </div>
        </div>
    </div>
    </section>
</div>

<section style="font-size: 38px" class="container">
    <div class="box-container primary row">
        <div class="one-full column">
            <h1 id="information"> About myself:</h1>
        </div>
        <div class="one-full column">
            <h6>
                I am Questallation, I started as a tiny bot that provided some utility commands, and some fun commands for my developer's server.
                Later on, my developer decided to work on the me to have it to specialise in one server. After a few friends
                wanted to me on thier servers, my developer changed the bot completely, and gave me a new name; Questallation.
                I have joined many new servers, and grown since, to what you see me today.
            </h6>
        </div>
    </div>


    <div class="box-container secondary row">
        <div class="one-full column">
            <h1> Commands:</h1>
        </div>
        <div class="one-full column">
            <h6>Please, come and see my commands,
                <a href="/commands">over here.</a>
            </h6>
        </div>
    </div>


    <div class="box-container primary row">
        <div class="one-full column">
            <h1> Credits:</h1>
        </div>
        <div class="one-full column">
            <h6>Theese people helped to improve me, over the times which I have lived:
                <a href="/credits">People over here.</a>
            </h6>
        </div>
    </div>
    </div>
</section>

<br/>
<footer class="center box-container secondary">
    <p class="no-margin"> Questallation | Excigma is not affiliated with discord in any way whatsoever |
        <a href="https://github.com/AlexFlipnote/ModestaCss" target="_blank" rel="noreferrer">CSS framework</a>
    </p>
</footer>

</body>
</html>

希望对您有帮助

今天过得好，
安东尼诺

如何使用HTML和CSS在网站中添加不同部分？

3 个答案: