html onclick scroll to top code example

Example 1: Scroll to the top of the page using JavaScript?

// Get The Id
var topPage = document.getElementById(`top-page`)

// On Click, Scroll to the Top of Page
topPage.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' })

// On scroll, Show/Hide the button
window.onscroll = () => {
  window.scrollY > 500
    ? (topPage.style.display = 'block')
    : (topPage.style.display = 'none')
}

// CSS
body {
    background-color: #111;
    height:5000px;
}


#top-page {
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  color: white;
  display: none;
}
// HTML
<img id="top-page" src="https://svgshare.com/i/LW3.sv" alt="Top">

Example 2: javascript scroll to top onclick

//EITHER:

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

//OR:

window.scroll({top: 0, left: 0});
//Or with jQuery
$('html,body').scrollTop(0);
//with animation
$('html, body').animate({ scrollTop: 0 }, 'fast');

Example 3: scroll to top

$("#scroll_icon").click(function()
	{
		jQuery('html,body').animate({scrollTop:0},2000);
	})

Example 4: javascript scroll to top onclick

window.scroll({top: 0, left: 0});
//Or with jQuery
$('html,body').scrollTop(0);
//with animation
$('html, body').animate({ scrollTop: 0 }, 'fast');