How do I add different sections in a website using HTML and CSS?

Question

I am making a website (brickman.glitch.me) and have a scroll button. How can I make it scroll down to what seems like a different page?

I've tried using the section tag, but I'm not the most experience so I've become stuck.

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

I want to make this so it scrolls down to a page where it's got a different background etc, so it looks like a different page. I have an example from a friend's website (questallation.glitch.me) where the button scrolls down. I would like to try make something similar to this. Any help?

Thanks in advance.

Possible duplicate of [html/css buttons that scroll down to different div sections on a webpage](https://stackoverflow.com/questions/16349490/html-css-buttons-that-scroll-down-to-different-div-sections-on-a-webpage) — Pedro Coelho, Mar 24 '19 at 02:13

score 0 · Answer 1 · answered Mar 24 '19 at 01:33

To automatically scroll to another section you can use href="x" where x is the id of the section you want to scroll to.

Here is a small example:

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

Andy Hoffman · Answer 2 · 2019-03-24T02:31:10.747

Have you looked at scroll-behavior: smooth? There is no iOS Safari support, but there is a polyfill.

From MDN

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

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

score 0 · Answer 3 · edited Nov 22 '22 at 23:08

I worked on your original source code, so this simple solution is based exactly on your example. Btw it works also on mobile. I took the section content from your friend's website, you can put whatever

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

How do I add different sections in a website using HTML and CSS?

3 Answers3