scroll up js code example

Example 1: javascript go to top of page

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

Example 2: scrool to top jquerry

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Example 3: scroll down up js

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

Example 4: javascript scroll down

window.scrollTo(300, 500);	//X=300 and Y=500

Example 5: scroll to top

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

Example 6: 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()

})

Tags:

Recent Posts