Many times, in our website we want to scroll automatically to a section of the webpage when we click on a button or a heading in a navbar or a list. So, to achieve this automatic scrolling to the required element, we need to take the help of jQuery. Using jQuery, we can achieve this in a very simple way. But first we need to understand two methods namely scrollTop() and offSet() in jQuery.
scrollTop() method: It helps to get the current vertical position of the scrollbar of the first element, in the set of all matched elements.
scrollTop() method: It is used to set the vertical position of the scroll bar to the value ‘val’.
offSet() Method: It is used to get the coordinates of the first element in the set of all matched elements.
Example 1: This example describes how to scroll a specific element using jQuery.
Example 2: In this example, we will see how to scroll to different sections of the page by clicking different buttons, along with a scrolling effect.
When the second button is clicked, the output is as follows.
- Hide scroll bar, but while still being able to scroll using CSS
- How to scroll automatically to a particular element using JQuery?
- How to scroll the page up or down using anchor element in jQuery ?
- How to find element with specific ID using jQuery ?
- How to scroll automatically to the Bottom of the Page using jQuery?
- How to scroll window using jQuery ?
- How to change style of elements on scroll using jQuery ?
- jQuery | scroll() with Examples
- How to determine the direction of a jQuery scroll event?
- How to get text of specific option tag using jQuery?
- How to select all elements that contains some specific CSS property using jQuery ?
- How to remove specific value from array using jQuery ?
- How to reload page after specific seconds in jQuery ?
- How to check a string starts/ends with a specific string in jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.