jQuery scrollTop() Method

jQuery HTML/CSS Methods

The scrollTop() method gets or sets the vertical scrollbar position of the selected element.

When using the scrollTop() methodGetposition, it returnsthe first selected elementthe vertical position of the scrollbar.

When using the scrollTop() methodSetWhen the position is set, it will beAll selected elementsSet the vertical position of the scrollbar.

Syntax:

Get the position of the vertical scrollbar:

$.scrollTop()

Set the position of the vertical scrollbar:

$.scrollTop(value)

Example

Get the scrollTop of DIV:

$("div").scroll(function(){
　　$(this).scrollTop();
});

Set the scrollTop of DIV:

$("button").click(function(){
　　$("div").scrollTop(150);
});

Set the document's scrollTop:

$("button").click(function(){
　　$(document).scrollTop(400);
});

Add smooth scrolling when the user scrolls the page:

let size = $(".main").height();　//　Get the height of ".main"
$(window).keydown(function(event) {
　　if(event.which ===　40) {　//　If the down arrow key is pressed
　　　　$("html, body").animate({scrollTop: "+="　+　size},　300);
　　} else if(event.which ===　38) {　//　If the up arrow key is pressed
　　　　$("html, body").animate({scrollTop: "-="　+　size},　300);
　　}
});

Parameter Value

jQuery HTML/CSS Methods