Home>
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.
-
Answer # 1
-
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>
Related questions
- javascript : Console gives error "Uncaught TypeError: Cannot read properties of null (reading 'style')" [duplicate]
- javascript : How to change the color of the scale in the video?
- javascript : html css + js how to position two charts (Chart_js) side by side rather than one below the other
- javascript : How to highlight one whole line in long HTML text
- javascript : How to emulate safari browser on windows
- javascript : Console throws an error: Uncaught TypeError: Cannot set properties of null (setting 'src')
- javascript : Why won't the animation start?
- javascript : Dropdown menu on click
- javascript : Wrong handler in JS media requests
scroll-behavior
-A CSS property that defines the scrolling behavior for any element on the page.