Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Smooth scroll to top of page
<body id="top">
<a href="#top" onclick="scrollToTop();return false">Back to Top &uarr;</a>
function scrollToTop() {
var position =
document.body.scrollTop || document.documentElement.scrollTop;
if (position) {
window.scrollBy(0, -Math.max(1, Math.floor(position / 10)));
scrollAnimation = setTimeout("scrollToTop()", 30);
} else clearTimeout(scrollAnimation);
}

Smooth scroll to top of page

If you need a plain JavaScript function to add a smooth scrolling back to the top of the page, you can use this script.

  1. Add an id of "top" to the <body> tag. Like this: <body id="top">
  2. Add the onclick function to the link. Like this: <a href="#top" onclick="scrollToTop(); return false">Back to Top ↑</a>
  3. Then either: 1.1. Include the JavaScript function in your markup, preferrably at the bottom before the closing </body> tag if possible. 1.1. Or, create a JavaScript file, place the script in it and call that file from your HTML document (either from the </head> section, or before the closing </body> tag if possible.)

Since this script is not part of the UI it can load last and will not negatively affect the user experience or usability of the page.

CodePen demo here: https://codepen.io/ricardozea/pen/5f756e303d5adc25ca3876e6a81c9e57

Author: Marco Del Corno - http://thewebthought.blogspot.com/2012/06/javascript-smooth-scroll-to-top-of-page.html

@NiklasMerz

This comment has been minimized.

Copy link

NiklasMerz commented May 10, 2015

Thank you for sharing

@josephwmiller

This comment has been minimized.

Copy link

josephwmiller commented Jul 17, 2015

Simple and clean. Exactly what I needed. Thank you.

@dariodepaolis

This comment has been minimized.

Copy link

dariodepaolis commented Jun 6, 2016

Nice!

@LeoMouraIot

This comment has been minimized.

Copy link

LeoMouraIot commented Jun 11, 2016

Woww Exactly what I needed

@ZnOX

This comment has been minimized.

Copy link

ZnOX commented Jun 30, 2016

Cool!

@Thomas-Rudge

This comment has been minimized.

Copy link

Thomas-Rudge commented Jul 27, 2016

Very succinct, thanks!

@dealloc

This comment has been minimized.

Copy link

dealloc commented Sep 19, 2016

Wouldn't it be more performant to use requestAnimationFrame for this kind of stuff?
I modified the sample to this

function scrollToTop() {
    if (document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0) {
        window.scrollBy(0, -50);
        requestAnimationFrame(scrollToTop);
    }
}
@superjose

This comment has been minimized.

Copy link

superjose commented Sep 30, 2017

@dealloc: Yes! You are correct. It's more important since requestAnimationFrame offers the best performance

@fbparis

This comment has been minimized.

Copy link

fbparis commented Jan 11, 2018

To get a ease-out effect and keep it simple, I've done this:

	function scrollToTop() {
		var position = document.body.scrollTop || document.documentElement.scrollTop;
		if (position){
			window.scrollBy(0,-Math.max(10, Math.floor(position / 10)));
			scrollAnimation=setTimeout('scrollToTop()',10);
		}
		else clearTimeout(scrollAnimation);
	}		
@rfw

This comment has been minimized.

Copy link

rfw commented Mar 30, 2018

Nice! Cool! 很赞

@CoAmA

This comment has been minimized.

Copy link

CoAmA commented Aug 19, 2018

thanks for putting it here

@SeanCassiere

This comment has been minimized.

Copy link

SeanCassiere commented Feb 26, 2019

Could anyone show me how I could add this code in with an Event Listener?

@christophernarciso

This comment has been minimized.

Copy link

christophernarciso commented Apr 2, 2019

Thank you for this snippet.

@ClaudiaPrez

This comment has been minimized.

Copy link

ClaudiaPrez commented Jun 18, 2019

great. It work!

@ricardozea

This comment has been minimized.

Copy link
Owner Author

ricardozea commented Jun 20, 2019

Updated the Gist with a link to a demo in CodePen and used @fbparis' script with a few small variations to improve the ease-out effect.

Thanks everyone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.