Javascript scroll to top no jquery

HTML DOM Element scrollTop

Get the number of pixels the content of «myDIV» is scrolled:

Scroll the contents of «myDIV» TO 50 pixels horizontally and 10 pixels vertically:

Scroll the contents of «myDIV» BY 50 pixels horizontally and 10 pixels vertically:

Description

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

See Also:

Syntax

Return the scrollTop property:

Set the scrollTop property:

Property Values

Value	Description
pixels	The number of pixels the element’s content is scrolled vertically.

Return Value

More Examples

Example

Scroll the contents of by 30 pixels horizontally and 10 pixels vertically:

Example

Toggle between class names on different scroll positions — When the user scrolls down 50 pixels from the top of the page, the class name «test» will be added to an element (and removed when scrolled up again):

function myFunction() if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) document.getElementById(«myP»).className = «test»;
> else document.getElementById(«myP»).className = «»;
>
>

Example

Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):

function myFunction() if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) document.getElementById(«myImg»).className = «slideUp»;
>
>

Browser Support

element.scrollTop is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Источник

Scroll to top in JavaScript with animation

In this article, you will learn how to create a «scroll to top» button with animation using pure Javascript without Jquery.

We will use the scrollTop() method to go to a specified location of the current page.

scrollTop() method takes two parameters scrollTop(x,y) .

If we pass both parameters as 0 , the page will reach to the left and top of the page.

1. In the above example, I have created a element and set its position to fixed. So that when we scroll the page, the button stays in one place. Even, the myFunction() is executed when the button is clicked.
2. Inside the myFunction(), we have called the scrollTop() method and passed both parameters as 0.

function myFunction() window.scrollTo(0, 0); >

html scroll-behavior:smooth; >

In the above example, we have explained how to create scroll to top button using javascript with animation. Click on the button to open the code in editor.

html> style> html scroll-behavior:smooth; > .my-btn pa-dding:6px 12px; background:#0000ff; color:#fff; border-radius:6px; position: fixed; bottom: 10px; right:10px; > /style> body style="height:1500px;background:#eee"> h1>The example of scrollTop() method./h1> button class="my-btn" onclick="myFunction()">Top/button> script> function myFunction() window.scrollTo(0, 0); > /script> /body> /html>

Источник

Scroll-to-top Button in vanilla JS (Beginners)

Scroll to top button is a very common UX feature in websites. It’s goal is to prevent annoying users forced to scroll back up — especially on mobile devices. In this short tutorial, we’ll see how to implement one with css and pure (vanilla) javascript. The simplest way to get a scroll to top button is to have an html element at the top and a link near the end of your page that calls it:

html  scroll-behavior: "smooth"; > 

That’s the easiest way to get a scroll to top (I’ve actually missed this on my original post as Loouis Low pointed out in the comments.) Result here: No javascript needed!

Scroll to top button with vanilla js

• Show button after the user has scrolled down x % of the page.
• Animate entrance and leave.

The button

Let’s just created a simple button with a class of scrollToTopBtn so we can refer to it in js.

Here are a few CSS properties for the button:

• position: fixed; gets it out of the flow of the page.
• bottom: 50px; and right: 50px; places it at the bottom right corner.
• z-index: 100; a large z-index keeps the button on top of every other elements.
• display: none; is used to hide it at first.

Detect user scroll

we can detect user’s scroll with a scroll event listener:

document.addEventListener("scroll", handleScroll); function handleScroll()  // do something on scroll > 

Show the Scroll to Top button logic

In the handleScroll function, we’ll check whether we need to show or hide the button. We are going to use three element properties:

• clientHeight gives us the visible part of an element in its parent.
• scrollHeight gives the total height of an element including the overflow part.

The height of the overflow part is the total amount of pixels that can be scrolled. In other words: scrollableHeight = scrollHeight — clientHeight

var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; 

document.documentElement is the document element. We are using it instead of document because scrollHeight and clientHeight are elements’ properties.

• scrollTop gives the number of pixels scrolled from the top. It’s the amount of pixels scrolled by the user.

By dividing scrollTop with scrollableHeight we get a ratio between 0 and 1. 0 meaning the user hasn’t scrolled and 1 meaning the user scrolled to the end of the page. This ratio tells us how much the user scrolled.

If we want the scroll to top button to show up after the user scrolled 50% we set a golden ratio of 0.5. And, with an if else statement, make the button visible above and hidden below.

document.addEventListener("scroll", handleScroll); // get a reference to the button var scrollToTopBtn = document.querySelector(".scrollToTopBtn"); function handleScroll()  var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var GOLDEN_RATIO = 0.5; if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO)  //show button scrollToTopBtn.style.display = "block"; > else  //hide button scrollToTopBtn.style.display = "none"; > > 

With that the scroll-to-top button appears and hides on scroll.

Scroll to top

There a lot of scrolling examples that use jQuery. But these days it is really easy to do this in pure js with scrollTo:

\\. scrollToTopBtn.addEventListener("click", scrollToTop); function scrollToTop()  window.scrollTo( top: 0, behavior: "smooth" >); > 

• top: 0, means scroll to 0px vertically.
• behavior: «smooth» makes the scroll smooth.
• there’s also a left property for horizontal scroll.

And that’s it! Here’s the final js:

document.addEventListener("scroll", handleScroll); // get a reference to our predefined button var scrollToTopBtn = document.querySelector(".scrollToTopBtn"); function handleScroll()  var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var GOLDEN_RATIO = 0.5; if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO)  //show button scrollToTopBtn.style.display = "block"; > else  //hide button scrollToTopBtn.style.display = "none"; > > scrollToTopBtn.addEventListener("click", scrollToTop); function scrollToTop()  window.scrollTo( top: 0, behavior: "smooth" >); > 

Tada 🎉🎉🎉!

Thanks for reading 🥰🥰!! I hope this was of help.

Improvements:

I’ve tried to keep it simple. Usually I would also toggle a class instead of the display to show a transition animation.

Here’s how you could fade up the button:

Источник

How to Scroll to the Top of the Page Using JavaScript

To make the page jump on the top instantly can be done with the native JavaScript method, namely — window.scrollTo(x-coord, y-coord) . This property of the window interface scrolls to a particular set of coordinates in the document. It has two parameters: the x and y.

• x-coord — pixel along the horizontal axis.
• y-coord — pixel along the vertical axis.

window.scrollTo(x-coordinate, y-coordinate)

Setting both parameters to 0 will scroll the page to the topmost and leftmost point.

function scrollToTop() < window.scrollTo(0, 0); >

html> html> head> title>Title of the document title> style> .scroll < height: 1200px; background-color: yellow; > style> head> body> h1> Scroll h1> p class="scroll">This is a large scrollable area. p> button onclick="scrollToTop()"> Click to scroll to top button> script> function scrollToTop( ) < window.scrollTo(0, 0); > script> body> html>

Window Interface

The Window interface represents a window that includes a DOM document.

It is the host of a variety of functions, objects, namespaces, and constructors that are not associated with the user interface window. The Window Interface is a place to include these items needed to be globally available.

The window global variable representing the window in which the script is running is exposed to JavaScript code.

Источник