Updated March 31, 2023
Definition of jQuery scroll page
jQuery scroll page is the first and second variations in jQuery, this method is a shortcut for scroll and handler in the third trigger. When a user scrolls to a different location within an element the scroll event is fired. When the element’s explicit height or width is smaller than the height or width of its contents, it impacts scrollable frames and elements with the overflow CSS attribute set to scroll.
What is jQuery scroll page?
• Scroll to a certain position on the page using the window Interface’s scrollTo() method. The x and y coordinates of the page to scroll the two options it allows.
• The page will be scrolled to the top and leftmost points if both parameters are set to 0.
• When the scroll position of an element changes, regardless of the cause, a scroll event is fired.
• When a user scrolls through the specified element, the scroll event occurs. All scrollable components and the window object respond to the scroll event.
• The scroll() method either triggers a scroll event or adds a function that will run when one happens.
Below is the syntax of jQuery scroll method is as follows.
Syntax:
$(selector).scroll()
$(selector).scroll(function)- In the first syntax, we are triggering scroll events by using selected elements. In the second syntax, we have attached a function to the event of the scroll.
Below is the parameter description syntax of jQuery scroll page is as follows.
1) Selector – This is a very important parameter used in the jQuery scroll method. We have used this parameter to specify the element in the jQuery scroll method.
2) Function – This is an optional parameter used in the jQuery scroll method. It will be specifying the function at the time the scroll event is triggering.
3) Scroll – Using the scroll method we have scrolled our page from top to bottom. It is a very important method that was used in jQuery.
- We can use jQuery to create amazing techniques to improve user involvement. Creating a jQuery Scroll to Element functionality is one such method.
- We can use this to build internal links on our website, and when a visitor clicks on one, he will be navigated to the relevant content.
- This is especially useful when the web page is quite lengthy, as these internal links transport viewers straight to the page’s specific themes.
How to Use jQuery scroll page?
- The scrollTop property of jQuery is used to control the position of the browser Scrollbar.
- By setting the scrollTop property to Top or Bottom, the page is scrolled to the top or bottom of the page.
- When the page must be scrolled to the top, the scrollTop property is set to Zero, and when the page must be scrolled to the bottom, it is set to the document’s height.
- When an element has a scrollbar, the scroll event is triggered. When the user drags the scrollbar up or down, the event is activated.
- The CSS overflow property can be used to create a scrollbar. The scroll event fires for all scrollable components or for window objects.
jQuery Scroll to Element Code
- The below example shows jQuery scroll to element code is as follows. In the below example, we are scrolling the page using paragraphs.
- We are using the scroll method to scroll the page. In below example we have used width as 200px and height as 200px.
Code:
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
<style>
#para{
width: 200px;
height: 200px;
overflow: scroll;
border: 3px solid red;
font-size: 20px;
}
</style>
</head>
<body>
<h1> JQuery Scroll Page </h1>
<h2> Scroll the page by using jQuery scroll method </h2>
<p> Example of JQuery scroll page </p>
<p id = "para"> Scroll to a certain position on the page using the window Interface's scrollTo () method. The x and y coordinates of the page to scroll the two options it allows. The page will be scrolled to the top and leftmost points if both parameters are set to 0.
</p>
<script>
$(document).ready(function(){
$("#para").scroll(function(){
$("#para").css("color", "Yellow");
$("#para").css("background", "lightgreen");
});
});
</script>
</body>
</html>
The below example shows that the jQuery scroll page without using function parameters are as follows.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function(){
$("div").scroll(function(){
$("span").text( x+= 1);
});
});
</script>
</head>
<body>
<p>JQuery Scroll Page </p>
<div style="border:2px solid black;width:200px;height:100px;overflow:scroll;">When an element has a scrollbar, the scroll event is triggered. When the user drags the scrollbar up or down, the event is activated. JQuery scroll page in first and second variations, this method is a shortcut for.on ("scroll", handler), and in the third trigger ("scroll").
</div>
<p>Scrolled <span>0</span> times.</p>
</body>
</html>
Top jQuery scroll page
The below example shows the top jQuery scroll page are as follows. We are using the scroll to top method to search the top line from the page.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Scroll on the top by using top jQuery scroll page
</title>
<style>
.scroll {
height: 800px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
JQuery Scroll Page
</h1>
<b>
Kindly scroll on the top of the page by using top jQuery scroll page
</b>
<p>
Kindly click on below tab to go on top of the page
</p>
<p class="scroll">
The x and y coordinates of the page to scroll the two options it allows. The page will be scrolled to the top and leftmost points if both parameters are set to 0.
</p>
<button onclick="scrollToTop ()">
Click on this button to go on top of the page
</button>
<script src=
"https://code.jQuery.com/jQuery-3.3.1.min.js">
</script>
<script>
function scrollToTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
Conclusion
When an element has a scrollbar, the scroll event is triggered. When the user drags the scrollbar up or down, the event is activated. Scroll to a certain position on the page using the window Interface’s scrollTo method. The x and y coordinates of the page to scroll the two options it allows.
Recommended Articles
This is a guide to jQuery scroll page. Here we discuss the Definition, What is jQuery scroll page, How to Use jQuery scroll page? examples with code implementation. You may also have a look at the following articles to learn more –
