Move to top in html

CSS — Positioning

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.

Now, we will see all the CSS positioning related properties with examples −

Relative Positioning

Relative positioning changes the position of the HTML element relative to where it normally appears. So «left:20» adds 20 pixels to the element’s LEFT position.

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

• Move Left — Use a negative value for left.
• Move Right — Use a positive value for left.
• Move Up — Use a negative value for top.
• Move Down — Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

   
This div has relative positioning.
   

It will produce the following result −

Absolute Positioning

An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner.

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

• Move Left — Use a negative value for left.
• Move Right — Use a positive value for left.
• Move Up — Use a negative value for top.
• Move Down — Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

   
This div has absolute positioning.
   

Fixed Positioning

Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

• Move Left — Use a negative value for left.
• Move Right — Use a positive value for left.
• Move Up — Use a negative value for top.
• Move Down — Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

   
This div has fixed positioning.
   

Источник

CSS — Positioning

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.

Now, we will see all the CSS positioning related properties with examples −

Relative Positioning

Relative positioning changes the position of the HTML element relative to where it normally appears. So «left:20» adds 20 pixels to the element’s LEFT position.

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

• Move Left — Use a negative value for left.
• Move Right — Use a positive value for left.
• Move Up — Use a negative value for top.
• Move Down — Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

   
This div has relative positioning.
   

It will produce the following result −

Absolute Positioning

An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner.

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

• Move Left — Use a negative value for left.
• Move Right — Use a positive value for left.
• Move Up — Use a negative value for top.
• Move Down — Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

   
This div has absolute positioning.
   

Fixed Positioning

Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

• Move Left — Use a negative value for left.
• Move Right — Use a positive value for left.
• Move Up — Use a negative value for top.
• Move Down — Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

   
This div has fixed positioning.
   

Источник

How TO — Scroll Back To Top Button

Learn how to create a «scroll back to top» button with CSS.

How To Create a Scroll To Top Button

Step 1) Add HTML:

Create a button that will take the user to the top of the page when clicked on:

Example

Step 2) Add CSS:

Example

#myBtn <
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
>

#myBtn:hover background-color: #555; /* Add a dark-grey background on hover */
>

Step 3) Add JavaScript:

Example

// Get the button:
let mybutton = document.getElementById(«myBtn»);

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() ;

function scrollFunction() if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) mybutton.style.display = «block»;
> else mybutton.style.display = «none»;
>
>

// When the user clicks on the button, scroll to the top of the document
function topFunction() document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
>

Источник

CSS top Property

Set the top edge of the positioned element 50px down from the top edge of its nearest positioned ancestor:

More «Try it Yourself» examples below.

Definition and Usage

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

• If position: absolute; or position: fixed; — the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
• If position: relative; — the top property makes the element’s top edge to move above/below its normal position.
• If position: sticky; — the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
• If position: static; — the top property has no effect.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS2
JavaScript syntax:	object.style.top=»100px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
auto	Lets the browser calculate the top edge position. This is default	Demo ❯
length	Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units	Demo ❯
%	Sets the top edge position in % of containing element. Negative values are allowed	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Use the top property with a negative value and for an element with no positioned ancestors:

div.b <
position: absolute;
top: -20px;
border: 3px solid blue;
>

div.c position: absolute;
top: 150px;
border: 3px solid green;
>

Related Pages

Источник