Learn to add a sleek scroll down button to your website using HTML, CSS, and JavaScript. Step-by-step guide with code examples.
Table of Contents
A scroll-down button is a navigational aid placed on a webpage, allowing users to smoothly scroll to the next section with a single click.
In this tutorial, we'll walk through the process of creating a scroll-down button using HTML, CSS, and JavaScript. Whether you're a beginner or a seasoned developer, you'll find this guide helpful in adding this useful feature to your website. Let's dive in!
Source Code
Step 1 (HTML Code):
Start by creating a button element within your HTML document. Assign it an ID for easy targeting in CSS and JavaScript.
Let's break down the HTML code step by step:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which in this case is HTML5.
2. <html lang="en">: This tag indicates the beginning of the HTML document, with the "en" attribute specifying the language of the document as English.
3. <head>: This section contains meta-information about the document, such as character encoding, viewport settings, and title.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters from different languages.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag instructs Internet Explorer to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport properties for responsive web design, ensuring proper rendering and scaling on various devices.
- <title>Scroll down button</title>: Sets the title of the webpage, which appears in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet named "styles.css" to the HTML document, allowing the webpage to apply styles defined in that stylesheet.
4. <body>: This section contains the visible content of the webpage.
- <section>: This is a semantic HTML5 element used to divide the content of the webpage into sections. In this case, there are two sections.
- <p>Scroll down button</p>: A paragraph element containing the text "Scroll down button".
- <a href="#" class="scroll-down" address="true"></a>: An anchor element (<a>) with an empty href attribute (#), typically used as a placeholder for JavaScript events. It has a class "scroll-down", which could be used for styling or JavaScript interaction.
- <section class="ok">: Another section element with a class "ok".
- <p>OK SCROLL !</p>: A paragraph element containing the text "OK SCROLL !".
5. <script>: This tag is used to include JavaScript files or code within the HTML document.
- <script src="script.js"></script>: This includes an external JavaScript file named "script.js" from the same directory as the HTML file.
Step 2 (CSS Code):
Apply CSS styles to the button to enhance its appearance and ensure it fits seamlessly with your website's design.
Here's a breakdown of the CSS rules:
1. body: Sets the background color of the entire webpage to black (#000).
2. *, :after, :before: These selectors apply styles to all elements, including pseudo-elements. The box-sizing property ensures that padding and border are included in the element's total width and height. The margin and padding properties are set to 0 to remove default spacing around elements.
3. section: Styles the section elements. They are set to occupy the full height of the viewport (100vh) and take up the full width of their container. They are displayed as table elements.
4. section.ok: This targets a specific section with the class "ok" and sets its background color to a dark gray (#555).
5. p: Styles the paragraph elements within the sections. It transforms text to uppercase, sets the text color to white, and specifies the font family as Arial. The paragraphs are displayed as table cells to allow vertical alignment in the middle of their parent container. Text is centered both horizontally and vertically.
6. .scroll-down: Styles the anchor element with the class "scroll-down", which presumably serves as a scroll-down button.
- It sets its initial opacity to 1 and applies a transition effect for smoother animation.
- Positioning it absolutely at the bottom of its container, centered horizontally (left: 50%; margin-left: -16px) with a specific width and height.
- Adds a border, border-radius, and background image. Also, it defines an animation effect (bounce) for the button to create a bouncing effect.
- The :before pseudo-element creates an arrow shape for the scroll-down button.
7. @keyframes bounce: This defines a keyframe animation called "bounce" which animates the scroll-down button to give it a bouncing effect. The button moves up and down in a bouncing motion.
body {
background-color: #000;
}
*,
:after,
:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
height: 100vh;
width: 100%;
display: table;
}
section.ok{
background-color: #555;
}
p{
text-transform: uppercase;
color: white;
font-family: arial;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
}
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
border: 2px solid #FFF;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
transform: scale(1)
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
} Step 3 (JavaScript Code):
Use JavaScript to implement the scroll functionality when the button is clicked. Scroll smoothly to the next section of the webpage.
Here's an explanation of each part of the code:
1. document.getElementById('scrollDownBtn'): This line selects the HTML element with the ID "scrollDownBtn". The getElementById method is used to target a specific element by its unique ID.
2. .addEventListener('click', function() { ... });: This method attaches an event listener to the selected element. In this case, it listens for a click event on the element with the ID "scrollDownBtn". When the click event occurs, the function inside the parentheses is executed.
3. window.scrollBy({ top: window.innerHeight, behavior: 'smooth' });: This line of code scrolls the window by a certain amount when the button is clicked. It uses the scrollBy method to scroll the window by a specified number of pixels.
- top: window.innerHeight: This specifies the distance to scroll vertically. window.innerHeight represents the height of the viewport (the visible portion of the browser window). So, it scrolls the window down by the height of the viewport, effectively moving to the next section of the webpage.
- behavior: 'smooth': This parameter specifies the scroll behavior. When set to 'smooth', it creates a smooth scrolling effect rather than an abrupt jump.
document.getElementById('scrollDownBtn').addEventListener('click', function() {
window.scrollBy({
top: window.innerHeight,
behavior: 'smooth'
});
});Final Output:
Conclusion:
Congratulations! You've successfully learned how to create a scroll-down button using HTML, CSS, and JavaScript. By following the step-by-step instructions outlined in this tutorial, you can enhance your website's user experience and navigation capabilities. The scroll-down button provides a sleek and efficient way for visitors to explore your content, making their browsing experience more enjoyable. Remember to customize the button's design and functionality to suit your website's style and requirements. With this valuable addition, you'll ensure that users can effortlessly navigate through your webpage with just a single click. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
