Javascript scrolling div to top

Element: scrollTop property

The Element.scrollTop property gets or sets the number of pixels that an element’s content is scrolled vertically.

An element’s scrollTop value is a measurement of the distance from the element’s top to its topmost visible content. When an element’s content does not generate a vertical scrollbar, then its scrollTop value is 0 .

scrollTop can be set to any integer value, with certain caveats:

• If the element can’t be scrolled (e.g. it has no overflow or if the element has a property of «non-scrollable«), scrollTop is 0 .
• scrollTop doesn’t respond to negative values; instead, it sets itself back to 0 .
• If set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.

When scrollTop is used on the root element (the element), the scrollY of the window is returned. This is a special case of scrollTop .

Warning: On systems using display scaling, scrollTop may give you a decimal value.

Value

Examples

Scrolling an element

In this example, try scrolling the inner container with the dashed border, and see how the value of scrollTop changes.

HTML

div id="container"> div id="scroller"> p> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea. p> div> div> div id="output">scrollTop: 0div> 

CSS

#scroller  overflow: scroll; height: 150px; width: 150px; border: 5px dashed orange; > #output  padding: 1rem 0; > 

JavaScript

const scroller = document.querySelector("#scroller"); const output = document.querySelector("#output"); scroller.addEventListener("scroll", (event) =>  output.textContent = `scrollTop: $scroller.scrollTop>`; >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

JavaScript Scroll to Top of Div

1. Use the scrollIntoView() Method to Scroll to Top of Div in JavaScript
2. Use the scrollTo() Method to Scroll to Top of Div in JavaScript

In JavaScript, for internal linking and scrolling through the webpage, we can have multiple ways to follow. We can even set the href of the anchor tag direct to an id and scroll up to that section.

But for a dynamic drive, we will switch to the JavaScript way of performing the task.

In the following section, we will demonstrate the scrollIntoView() and scrollTo() methods. Both methods have similar functionality, but scrollIntoView() can work without any parameter, and scrollTo() might need some specified points.

Use the scrollIntoView() Method to Scroll to Top of Div in JavaScript

Technically, the method requires nothing other than the declaration of the method. We will first initiate an instance for the top div element and then use the scrollIntoView() assisted.

Consequently, an event of linking will specifically take the view to that top portion. The following code lines explain in detail.

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  title>JS Bintitle>  style>  #top  height:200px;  background:pink;  >  #buff  height:800px;  >  style>  head> body> div id="top">div>  div id="buff">div>  a href="javascript: scroll()">Jump to top of pagea>  script>  function scroll()  var top = document.getElementById("top").scrollIntoView(: 'smooth'>, true);  >  script>  body>  html> 

Use the scrollTo() Method to Scroll to Top of Div in JavaScript

The scrollTo() method takes parameters to reset the viewport measurements. Usually, the current state of the viewport will have its position on the x-axis and y-axis.

Later, to reach the top segment, we will reset the current positions, and thus we will be at the top of the div .

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  title>JS Bintitle>  style>  #top  height:200px;  background:orange;  >  #buff  height:800px;  >  style>  head> body> div id="top">div>  div id="buff">div>  a href="javascript: scroll()">Jump to top of pagea>  script>  function scroll()  var top = document.getElementById("top")  window.scrollTo(0,0);  >  script>  body>  html> 

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

Источник

JavaScript — scroll to top of element

sienko

In this article, we would like to show you how to scroll to the top of an element using JavaScript.

var element = document.querySelector('#element'); element.scrollTop = 0;

Note:

Go to this article if you’re looking for a solution that works in both modern and older browsers.

1. Using scrollTop property

In this example, we set scrollTop property to 0 to scroll to the top of the element on the button click event.

// ONLINE-RUNNER:browser;    
Scroll this text to bottom and click the button
 
Line 1
 
Line 2
 
Line 3
 
Line 4
 
Line 5
 
Line 6
 
Line 7
 
Line 8
 
Line 9
 
Line 10
 
 var element = document.querySelector('#element'); function scrollToTop() Scroll to top  

2. Using scroll() / scrollTo() method

In this example, we use scroll() / scrollTo() methods to scroll to the top of the element on button click event.

Note:

The scroll() / scrollTo() methods appeared in major web browsers around 2015-2020.

// ONLINE-RUNNER:browser;    
Scroll this text to bottom and click the button
 
Line 1
 
Line 2
 
Line 3
 
Line 4
 
Line 5
 
Line 6
 
Line 7
 
Line 8
 
Line 9
 
Line 10
 
  Scroll to top  

3. Smooth scroll behavior

In this example, we use scroll() / scrollTo() methods with smooth behavior to scroll to the top of the element on button click event.

Note:

The scroll() / scrollTo() methods appeared in major web browsers around 2015-2020.

// ONLINE-RUNNER:browser;    
Scroll this text to bottom and click the button
 
Line 1
 
Line 2
 
Line 3
 
Line 4
 
Line 5
 
Line 6
 
Line 7
 
Line 8
 
Line 9
 
Line 10
 
  Scroll to top  

References

Источник