Scroll Down Button

Scroll to top button with just HTML CSS

Hello dear friends 👋
🤞 Hope you all doing good in your coding journey. In this post i have to show a «scroll to top» button which you might have seen on professional and long website pages which help is to go back to top of the page.

Confused 🤯

scroll to top button with JQUERY

Scroll to top button with JQuery

🚩 Atul Prajapati 🇮🇳 ・ May 30 ・ 1 min read

Top comments (28)

Ah so the scroll-behavior: smooth css on the html tag makes the bowser a bit smarter and prevents a refresh! I was just playing with it in codepen and it works with ids on the page too!

Very clever and useful — thanks! 🙌🏾

13 likes Like Comment button

HTML, CSS, Bootstrap, XML, ajax, react js, WordPress, Magento, Shopify, Photoshop, Camtasia, SEO & learning new skills every moment 👨🏼‍💻 | I believe in learning and sharing with others 🛴

yeah its a short invention 🙂

Actually i am working on a «Insurance» service based website and I want to add this scroll to top button on it, that’s why all this efforts 🙂

by the way, thanks for sharing your feelings in comment. You are a nice guy.

4 likes Like Comment button

same thing that came to mind; using the id on the page too.

2 likes Like Comment button

Not accessible for keyboard and screen-reader users, because the focus is not going at the top of the page, with the scroll, and the link hasn’t a label that can be rendered by screen-reader to indicate the purpose of the link.

You can take a look at my fork if you want to see some fixes of these issues : codepen.io/Kain314/pen/ExQLLJd

4 likes Like Comment button

HTML, CSS, Bootstrap, XML, ajax, react js, WordPress, Magento, Shopify, Photoshop, Camtasia, SEO & learning new skills every moment 👨🏼‍💻 | I believe in learning and sharing with others 🛴

Источник

Scroll Down Button Using HTML & CSS

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make a Scroll down button. In Today’s session, We will use HTML & CSS to complete this Project.

The HTML (Hypertext Markup Language) Code will make the structure of the project. The CSS (Cascading Stylesheet) code will provide the styling and coloring to it and will contribute as the main source to conclude this project.

We’ll show you the Scroll Down Button Using HTML & CSS with complete source code available for you so you just copy and paste it into your project.

I hope you have got an idea about the project.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

HTML Code for Scroll Down Button

 
 
Hello Guys
 
 
 
 
Welcome to Codewithrandom
 
 

In this HTML code, we have defined the full structure for the scroll-down button in which we have defined an arrow and some sections. Let us code the CSS part to understand the part of styling.

CSS Code for Scroll Down Button

* < padding: 0; margin: 0; box-sizing: border-box; >html < font-size: 40px; font-family: "Montserrat"; scroll-behavior: smooth; >section < min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; >#sec-1 < background-color: indigo; >#sec-2 < background-color: red; >.scroll-down < height: 50px; width: 30px; border: 2px solid black; position: absolute; left: 50%; bottom: 20px; border-radius: 50px; cursor: pointer; >.scroll-down::before, .scroll-down::after < content: ""; position: absolute; top: 20%; left: 50%; height: 10px; width: 10px; transform: translate(-50%, -100%) rotate(45deg); border: 2px solid black; border-top: transparent; border-left: transparent; animation: scroll-down 1s ease-in-out infinite; >.scroll-down::before < top: 30%; animation-delay: 0.3s; /* animation: scroll-down 1s ease-in-out infinite; */ >@keyframes scroll-down < 0% < /* top:20%; */ opacity: 0; >30% < opacity: 1; >60% < opacity: 1; >100% < top: 90%; opacity: 0; >>

In this CSS code, we have styled the project. we have given the color to the sections and aligned them in a proper way. Then we added an animation on the scroll-down button and defined the height, width & margin. Let us see the final output of the project Scroll Down Button using HTML & CSS (Source Code) | HTML Button to Scroll Down.

Final Output Scroll Down Button Using HTML & CSS

We have successfully created our Scroll Down Button Using HTML & CSS. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Keep Learning.

Источник

Scroll Down Button | HTML & CSS Tutorial

Hey everyone. Welcome to Coding Artist. Today we will learn how to create a scroll down button. To create this button we need only HTML and CSS.

The scroll down button consists of an animation that indicates the user to scroll down to a new section. Clicking on the button takes the user to the next section of the page. This is not limited only to the section. This button can be used to scroll to any section of the page.

We usually use the scroll down button on hero sections. But we can use it on any section of our page. Also, If you are looking for a tutorial on the scroll to top button, you can check out this tutorial here.

Video Tutorial:

If you prefer to learn by watching a video tutorial, you should check out the video version of this tutorial here. And do subscribe to my youtube channel where I post web development related tips, tricks and tutorials.

Project Folder Structure:

Before we even start coding, we need to create a project folder structure. To do that we create a folder called ‘Scroll Down Button’. Within this folder, we have two files. The first file is the HTML document. We name this file index.html. The next one is the stylesheet which we name style.css. We can now begin to code.

HTML:

The HTML section consists of two section elements. We assign each of them a unique id. The first section consists of an anchor tag. The ‘href’ attribute of this is set to the id of section-2. Also, we assign ‘scroll-btn’ id to the anchor tag.

The text/content of section-2 is just for demo purposes. You can use any kind of element in this section.

          
HELLO THERE
 
WELCOME TO CODING ARTIST
 
   

CSS:

Now let us style our sections and button using CSS. Do copy the code below and paste it into your stylesheet.

We don’t have to do much in CSS since we have already added the functionality using HTML. We start by discarding the margins and paddings of all the elements.

Next, we set the scroll behaviour of the document to smooth. Please note that this is a crucial step. Without this, there would be no transition to the next section.We use the anchor tag along with its before pseudo-element to create the scroll down shape. And to add the animation we use the animation property along with keyframes.

We use the after pseudo-element of the anchor tag to insert the ‘Scroll Down’ text.
To make this code responsive we use media queries with its breakpoint set at a max-width of 500px.

* < padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; >html < scroll-behavior: smooth; >section < height: 100vh; position: relative; >#section-1 < background-color: #2d8df8; >a#scroll-btn < position: absolute; height: 10em; width: 6.25em; border: 0.5em solid #ffffff; margin: auto; left: 0; right: 0; bottom: 6.25em; border-radius: 3em; >a#scroll-btn:before < position: absolute; content: ""; margin: auto; left: 0; right: 0; top: 1.2em; height: 1.2em; width: 1.2em; background-color: #ffffff; border-radius: 50%; animation: move-down 2s infinite; >@keyframes move-down < 80% < opacity: 0.5; >100% < transform: translateY(5.3em); opacity: 0; >> a#scroll-btn:after < position: absolute; content: "SCROLL DOWN"; width: 12em; display: block; width: 12em; text-align: center; left: -4.2em; bottom: -2.5em; font-size: 1.6em; color: #ffffff; letter-spacing: 3px; font-weight: 600; >#section-2 < background-color: #111315; color: #ffffff; font-size: 2.7em; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; >@media screen and (max-width: 500px) < a#scroll-btn < font-size: 12px; >>

We have successfully built the scroll down button. If you have any issues while creating this code you can download the source code by clicking on the download button below. Also, I would like to hear from you. If you have any queries, suggestions or feedback then comment them below.
Happy Coding!

Источник

Scroll To Top Button Using only HTML and CSS

In this article, we Create Scroll To Top Button Using Css. We Create A button that scrolls to the top of the page When we Bottom Of the Page. We Create 3 to 4 Paragraph Of 100 Word Using Html and Then Create Scroll To Top Button Using CSS.

It’s needed when you long content on the page and you don’t want that your user closes your tab because who scrolls a lot, so this is a button that takes your user to the top of your page or any section where you want.

So in this project, we use only html and css to scroll to top. No framework or javascript only html css with basis code. So let’s start writing our html code for this scroll to top project.

HTML Code For Scroll To Top

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

        
 
Main Title
 
Bear claw gummi bears danish ice cream halvah cotton candy pastry chocolate bar. Croissant cotton candy cotton candy jelly beans shortbread cheesecake sugar plum. Marshmallow brownie liquorice jelly carrot cake bonbon jelly-o ice cream. Sweet roll cupcake tootsie roll candy sugar plum gingerbread pastry. Halvah carrot cake lemon drops cake marshmallow gingerbread pie sesame snaps. Cheesecake lemon drops muffin sweet wafer chupa chups. Pudding gummi bears cupcake powder chocolate bar cupcake. Sesame snaps macaroon candy jelly ice cream sweet muffin wafer carrot cake.
 
Secondary title
 
Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding bonbon pudding cookie marshmallow.
 
Secondary title
 
Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding bonbon pudding cookie marshmallow.
 
 Back to Top  

So this is our Html code, this is very long but we create only some Paragraph text sections so we have to get scroll bar Content and at the end of html code we add a ahref link that we use as a button in this project to scroll to top using the link.

Only Html Code Output

Here is the output with only html code, then we write css for styling the link to the button and Give Functionality of scroll to the top.

CSS Code For Scroll To Top

body < display: grid; grid-template-columns: 1fr 0px; font-family: system-ui, sans-serif; background: #eee; >.top < --offset: 100px; /* control when the button appear */ position: sticky; bottom: 20px; margin-right: 10px; place-self: end; margin-top: calc(100vh + var(--offset)); width: 60px; aspect-ratio: 1; background: #ff8b24; border-radius: 10px; font-size: 0; >.top:before < content: ""; position: absolute; inset: 30%; transform: translateY(20%) rotate(-45deg); border-top: 5px solid #fff; border-right: 5px solid #fff; >h1 < font-size: 3rem; >p < font-size: 1.5rem; text-align:justify; >body > div < margin-inline: max(3px,50% - 800px/2); >/* remove the below if you don’t want smooth scrolling */ html, body

This is our short css code for Scroll to Top button and now it’s working perfectly. We use a grid system to align our html content and style a Link to the button. Now Our Button Ready To Scroll to Top Of Page.

Final Output For Scroll To Top Button

This is the video for this project preview. You can see when we on home page (main page) scroll to top button not visible but when we little bit scroll there’s a button and when we click on this button we automatically scroll to the top of the page. We use only the id selector for this project you can see in html how we connect this link to our 1st section.

Hope you like this project, we create your own and use this project in any project. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

written by – Codewithrandom

Similar Posts

How to make a random password generator | Password Generator Js

How to make a random password generator | Password Generator Js Welcome to today’s tutorial. Today we are going to create a Random Password Generator. For this, we are going…

Create Email Validation Using JavaScript

Learners, In this article we are going to look at Email validation using Javascript. We all know when we fill out any form and when we do any mistake in…

How to Add Text on Background Video in HTML and CSS

Create Text Overlay on Video Using HTML and CSS Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Add Text Background…

Animated Login Form Using HTML and CSS (Source Code)

Animated Login Form Using HTML and CSS Hello Coder! Today We Learn how to Create an Animated Login Form Using HTML and CSS in this tutorial. I promise that you…

Create A Html Table | Html Table Css White Border – Codewithrandom

Create A Html Table | Html Table Css White Border – Codewithrandom How to create a table in HTML ? This is a question asked by many developers who are…

Claymorphism Design Form Using HTML and CSS

Claymorphism Design Form Using HTML and CSS Welcome to the Codewithrandom blog. In this blog, we learn how to create a Claymorphism Design Form Using HTML and CSS. Claymorphism Design…

Источник