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:
  • Include the JavaScript function in your markup, preferrably at the bottom before the closing </body> tag if possible.
  • 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 NiklasMerz commented May 10, 2015

Thank you for sharing

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jul 17, 2015

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

@dariodepaolis

This comment has been minimized.

Copy link

@dariodepaolis dariodepaolis commented Jun 6, 2016

Nice!

@LeoMouraIot

This comment has been minimized.

Copy link

@LeoMouraIot LeoMouraIot commented Jun 11, 2016

Woww Exactly what I needed

@ZnOX

This comment has been minimized.

Copy link

@ZnOX ZnOX commented Jun 30, 2016

Cool!

@Thomas-Rudge

This comment has been minimized.

Copy link

@Thomas-Rudge Thomas-Rudge commented Jul 27, 2016

Very succinct, thanks!

@dealloc

This comment has been minimized.

Copy link

@dealloc 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 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 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 rfw commented Mar 30, 2018

Nice! Cool! 很赞

@CoAmA

This comment has been minimized.

Copy link

@CoAmA CoAmA commented Aug 19, 2018

thanks for putting it here

@SeanCassiere

This comment has been minimized.

Copy link

@SeanCassiere 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 christophernarciso commented Apr 2, 2019

Thank you for this snippet.

@ClaudiaPrez

This comment has been minimized.

Copy link

@ClaudiaPrez ClaudiaPrez commented Jun 18, 2019

great. It work!

@ricardozea

This comment has been minimized.

Copy link
Owner Author

@ricardozea 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!

@dinizgb

This comment has been minimized.

Copy link

@dinizgb dinizgb commented Apr 30, 2020

@dealloc Great work.

@akmmp241

This comment has been minimized.

Copy link

@akmmp241 akmmp241 commented Jun 2, 2020

good job and thank you

@uzair004

This comment has been minimized.

Copy link

@uzair004 uzair004 commented Aug 19, 2020

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

it's already attached to that link but if you want to do it another way (event listener)

anchor.addEventListener('click', scrollToTop)

make sure anchor link is selected first using document.querySelector() or document.getElementById() if you have id for it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment