onclick scroll to top javascript code example

Example 1: javascript scroll to top of page

//Instant scroll to top of page
window.scrollTo(0, 0);

Example 2: javascript go to top of page

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

Example 3: 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 4: scroll to top

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

Example 5: simple button scrolling with this

// Select all »a« elements with a parent tag »nav« and add a function that is executed on click
$('#id a').on('click', function (e) {

   // Define variable of the clicked »a« element (»this«) and get its href value.
   var href = $(this).attr('href')

   // Run a scroll animation to the position of the element which has the same id like the href value.
   $('html, body').animate({
      scrollTop: $(href).offset().top
   }, '300')

   // Prevent the browser from showing the attribute name of the clicked link in the address bar
   e.preventDefault()

})