Updated April 6, 2023
Definition of jQuery ScrollTop Animate
The jquery scrolltop animate is a combination of a scrolltop and animate method to display an animated scrollbar with a given position. It is multiple functions to display vertical scrollbar position as per required animation. The scrolltop animate are methods to place vertical scrollbar function in top position using an animate method in the jquery technology. The scrollbar animate is a method to contain scrolltop as property and applies the animated style. This function is displayed vertical scroll bar in the top position or 0 positions. The jquery animate is a method to displays an advanced style system and includes other jquery functions or properties.
Syntax:
The scrolltop is jquery property to display a vertical scrollbar in the top position. The syntax is displayed below.
$(html_selector).scrollTop(scrollbar position)The animate is a jquery method to displayed application property in style and animation. The syntax of the jquery animate is displayed below.
$(html_selector).animate ({CSS style or animation style});The jquery scrolltop animate is combine the scrolltop property and animate method. The jquery animate method contains the jquery scrolltop property and its position. The syntax of the jquery scrolltop animate is displayed below.
$(html_selector).animate ({scrollTop: position});The “Html selector” is used an HTML and body tag to display the scrollbar in a top position. The syntax of the jquery scrolltop animate with the tag is displayed below.
$("html, body").animate ({scrollTop: position});The syntax of the jquery scrolltop animate with speed is displayed below.
$("html, body").animate ({scrollTop: position}, speed);The speed property is used to control the display scrollbar at a required speed.
How jQuery ScrollTop Animate works?
Create an application page with an HTML extension.
Example #1: jqueryScrollTopAnimate.html
The download jquery file and connect with the HTML file.
OR
Place the online jquery file in the script tag of the HTML page.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>Create an application page and place content with tags.
<h2 class = "scrollanimate">Jquery scrolltop animate method is here…
</h2>Create a button with the “onclick” function.
<button onclick = "jqueryScrolltopAnimate()">
Click here to scrolltop...
</button>Create a second script tag for jquery scrolltop animate.
<script> write jquery scrolltop animate code here… </script>Place selector with the animate method.
$("html, body").animate({ scroll top property here… });Place scrollTop property with position value.
$("html, body").animate({ scrollTop: "0" });If you want then add speed of the animated scrollbar.
$("html, body").animate({ scrollTop: "0" }, 2000);If you want then add style of the web page.
.scrollanimate {
height: 800px;
background-color: lightgrey;
border: 3px solid black;
}Combine the working procedure here.
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
function jqueryScrolltopAnimate () {
$("html, body").animate ({ scrollTop: "0" });
}
</script>
</head>
<body>
<h2 class="scrollanimate">
Jquery scrolltop animate method is here...
</h2>
<button onclick="jqueryScrolltopAnimate()">
Click here to scrolltop...
</button>
</body>
</html>Examples
Let us discuss few examples for better understanding :
Example #1
The basic animate example and output shows below
Code:
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
.scrollanimate {
height: 800px;
background-color: lightgrey;
border: 1px solid black;
}
</style>
<script type="text/javascript">
function jqueryScrolltopAnimate() {
$("html, body").animate({ scrollTop: "0" });
}
</script>
</head>
<body>
<h2 class="scrollanimate">
Jquery scrolltop animate method is here...
</h2>
<button onclick="jqueryScrolltopAnimate()">
Click here to scrolltop...
</button>
</body>
</html>Output:
Description
- If you click on the given button then the page automatically started to slide upward side.
- You must use HTML, body tag for the selector and scrollTop position is 0.
Example #2
The basic animate example and output shows below.
Code:
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
.scrollanimate {
height: 800px;
background-color: orange;
border: 3px solid black;
}
</style>
<script type="text/javascript">
function jqueryScrolltopAnimate() {
$("html, body").animate({ scrollTop: "0" }, 2000);
}
</script>
</head>
<body>
<h2 class="scrollanimate">
Jquery scrolltop animate method is here...
</h2>
<button onclick="jqueryScrolltopAnimate()">
Click here to scrolltop...
</button>
</body>
</html>Output:
Description:
- This method applies speed limit for sliding and shows top page content.
- You choose either fast or slow speed limit for vertical sliding.
- If you click on the given button then page automatically started to slide upward side.
Example #3
The basic animate with CSS style example and output shows below.
Code:
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
.scrollanimate {
height: 800px;
background-color: aqua;
border: 3px solid black;
width: 500px;
}
body{
background-color: gray;
}
button{
border: 1px solid yellow;
color: black;
background-color: orange;
}
</style>
<script type="text/javascript">
function jqueryScrolltopAnimate() {
$("html, body").animate({ scrollTop: "0" });
}
</script>
</head>
<body>
<h2 class="scrollanimate">
Jquery scrolltop animate method is here...
</h2>
<button onclick="jqueryScrolltopAnimate()">
Click here to scrolltop...
</button>
</body>
</html>Output:
Description:
- If you click on the given button then the page automatically started to slide upward side.
- You must use HTML, body tag for the selector and scrollTop position is 0.
- Apply CSS style on the web page as per requirement.
- Use the style for the button to recognize the scrolling button.
- Apply CSS style on the body of the web page as per requirement.
Example #4
The basic animate with alert example and output shows below.
Code:
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
.scrollanimate {
height: 900px;
background-color: lightgrey;
border: 1px solid black;
}
</style>
<script type="text/javascript">
function jqueryScrolltopAnimate() {
alert($("html, body").animate({ scrollTop: "0" }, 1000));
}
</script>
</head>
<body>
<h2 class="scrollanimate">
Jquery scrolltop animate method is here...
</h2>
<button onclick="jqueryScrolltopAnimate()">
Click here to scrolltop...
</button>
</body>
</html>Output:
Output 2:
Description:
- If you click on the given button then the alert page popup on the top of the page.
- If you click on the ok button automatically started to slide upward side.
- You must use HTML, body tag for the selector and scrollTop position is 0.
Conclusion
- It makes web application hustler-free and user-friendly.
- It uses to display top data effortlessly.
- It is useful for long pages and lengthy div or container tags.
Recommended Articles
This is a guide to jQuery ScrollTop Animate. Here we discuss the definition, syntax, How jQuery ScrollTop Animate works?, examples with code implementation. You may also have a look at the following articles to learn more –
