Home>

javascript : Block scrolling by clicking on the arrows

I have a block on the page that should scroll when you click on the arrows. The block itself is located between the arrows. Can you provide an example of how this can be implemented. Preferably without javascript, if there is such a way.

javascript html css
  • Answer # 1

    scroll-behavior-A CSS property that defines the scrolling behavior for any element on the page.

    a {
  display: inline-block
  width: 50px
  text-decoration: none;
}
nav,
scroll-container {
  display:block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px
  border: 1px solid black;
}
scroll-container {
  display:block;
  width: 350px
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display:flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em
}
    <!DOCTYPE html><htmllang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="style.css">  <title>Document</title></head><body>  <nav>    <a href="#page-1">1</a>    <a href="#page-2">2</a>    <a href="#page-3">3</a>  </nav>  <scroll-container>    <scroll-page id="page-1">1</scroll-page>    <scroll-page id="page-2">2</scroll-page>    <scroll-page id="page-3">3</scroll-page>  </scroll-container></body></html>
  • Answer # 2

    scroll-behavior-A CSS property that defines the scrolling behavior for any element on the page.

    a {
  display: inline-block
  width: 50px
  text-decoration: none;
}
nav,
scroll-container {
  display:block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px
  border: 1px solid black;
}
scroll-container {
  display:block;
  width: 350px
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display:flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em
}
    <!DOCTYPE html><htmllang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="style.css">  <title>Document</title></head><body>  <nav>    <a href="#page-1">1</a>    <a href="#page-2">2</a>    <a href="#page-3">3</a>  </nav>  <scroll-container>    <scroll-page id="page-1">1</scroll-page>    <scroll-page id="page-2">2</scroll-page>    <scroll-page id="page-3">3</scroll-page>  </scroll-container></body></html>