Trending October 2023 # Implementation Of Jquery Scrolltop() Method # Suggested November 2023 # Top 10 Popular

You are reading the article Implementation Of Jquery Scrolltop() Method updated in October 2023 on the website Vibergotobrazil.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Implementation Of Jquery Scrolltop() Method

Introduction to jQuery scrollTop()

scrollTop() method in jQuery is an inbuilt method that is used to get or set the vertical scrollbar position of the first matched element. It works for both visible and non – visible elements. The vertical scrollbar position is calculated as the number of pixels above the scrollable area. If the scrollbar is at the top, that means, the number of pixels is “0”.When this method is used to get the scrollbar position for the specified element, the current vertical position of the first matched element in the set of matched elements is returned. When this method is used to set the scrollbar position, the vertical position of every matched element is set.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax:

To get the vertical scrollbar position.

$(selector).scrollTop()

This method accepts no parameter.

To set the vertical scrollbar position.

$(selector).scrollTop(position) Implementation of jQuery scrollTop() Method

Given below are the examples of jQuery scrollTop() Method

Example #1

How scrollTop() method in jQuery actually works.

Code:

$(document).ready(function() { alert($(“div”).scrollTop() + ” px”); }); }); <div style=”border:1px solid black; background- color:rgb(255, 238, 238);width:200px;height:100px;overflow:auto” > This example explains the effect of jQuery scrollTop() method. This inbuilt method gers or sets the verticall scrollbar position of a specified element. The position refers to the number of pixels above the scrollable area.

Output:

Initially, a vertical scrollbar is at the very top of the div.

This means the number of pixels above the scrollable area is 0.

This value refers to the number of pixels the given div content has been scrolled vertically to.

Example #2

Trying to add some animation effects to the scrolling feature. By using the animate() method with the scrollTop property for scrolling upwards to a page with some animation.

Code:

font: 18px Arial, sans-serif; } .scroll { background-color:lightblue; height: 400px; width: 500px; } .scrolltoTop { position: fixed; bottom: 10px; left: 10px; background: peachpuff; color: maroon; border-radius: 30px; padding: 15px; font-weight: bold; line-height: normal; border: none; } $(document).ready(function() { $(“html, body”).animate( { scrollTop: 0 }, “slow” ); return false; }); }); This example explains the effect of the jQuery scrollTop() method. This inbuilt method gers or sets the verticall scrollbar position of a specified element. The position refers to the number of pixels above the scrollable area. The position refers to the number of pixels above the scrollable area. When this method is used to get the scrollbar position for the specified element, current vertical position of the first matched element in the set of matched elements is chúng tôi this method is used to set the scrollbar position, the vertical position of every matched element is set.

Output:

There is a button displaying “Scroll to Top” at the bottom of the screen.

Start scrolling gradually vertically downwards.

In the below screenshot, the scrollbar can be seen at the bottom-most position of the page.

One can add various animation effects to the scrolling feature by setting or modifying the speed of scrollTop property.

In our example, we have animated the scrolling with the default speed.

Example #3

How to return the vertical scrollbar position as we move along a specific div.

Code:

$(document).ready(function() { $(“div.scroll”).scrollTop( 200 ); $(“div.scroll”).mousemove(function() { var pos = $(“div.scroll”).scrollTop(); }); }); div.scroll { background: #cccccc none repeat scroll 0 0; border: 3px solid lightslategrey; margin: 3px; padding: 10px; position: relative; width: 300px; height: 200px; overflow: auto; } div.value { margin: 10px; width: 300px; height: 50px; background-color: lightblue; } p { margin: 10px; padding: 10px; border: 3px solid lightslategrey; width: 1000px; height: 1000px; margin: 3px; }

Here, vertical scrollbar can be seen at the topmost position of the div.

Vertical scrollbar position: 0px.

Now, the scrollbar starts moving vertically downwards.

Vertical scrollbar position now shows value: 454px.

Scrollbar is moved a bit more vertically downwards, now the Vertical scrollbar position: 839px.

Thus, we see that the value for the Vertical scrollbar position keeps on changing as we gradually scroll downwards.

Conclusion – jQuery scrollTop()

This basically adds animation to the scrolling feature without using any jQuery plugin. For custom animation, the animate() method can be used which functions by changing the value of scrollTop property gradually to create an animation effect.

$("html, body").animate({ scrollTop: value });

Speed of the animation can also be modified as required.