Updated April 18, 2023
Introduction to jQuery scroll to div
jQuery scroll to div is defined as, it is the functionality that is helpful for single page websites, it allows users to go on a specific section of the page by clicking on the anchor link or button without manually scrolling, and such type of scrolling is called the smooth scrolling, the jQuery scrollTop method is an easy way to scroll to div the element and also by using the jQuery animate() method we can add animation on the page, a scroll is an event which sent an element when user wants to scroll at different places in an element.
Syntax:
The basic syntax of jQuery:
$(selector).action()where,
- $ – this is used to define jQuery.
- selector- is used to find the HTML element.
- action- the action is to be performed on the elements.
And all these we need to write in scripting tag.
- In div we can write different sections and we can define them at the top of the web page, div tag as follows,
<div>....</div>How scroll to div performs in jQuery?
If we have a single page website and we have to go through all content or few contents then it might be lengthy and it will take more time, if we want to search for a specific part of that page then with the help of smooth scrolling we can go there by clicking on buttons which are available at the top of the page and that button we can make available by using the scroll to div functionality.
Scroll to div is a special type of functionality that reduces the efforts of the users for example to reach the specific portion of the page user do not need to go through all contents of the page, user can reach the specific portion by clicking on anchor links which can available at the top of the page. jQuery provides scrollTop method to scroll to div elements easily we can also add the animation by using the jQuery animate() method, we have explained examples of how to jump at a specific portion of the page without manually scrolling.
In example1 we have defined the CSS file and the JavaScript file under the head tag in the HTML file and under the JavaScript file we took a function and scrollTop method with its syntax also in scripting tags we have written src file, in HTML file under the body tags we can define different sections, at first by using top we have defined five links at the top of the page to go on the specific pages which are available in that page only that links are also called as anchor links and help user to go easy at the specific page that user wanted to go, we have not written content under the content of every section of that links but you can write content, so no user do not need to scroll it manually instead of that we can directly click on the links.
To give a better interface to our webpage we can use smooth scrolling which is provided by jQuery that also reduces the time and efforts of the user to reach the specific page, we can add animation by using the jQuery animate() method and scrollTop is provided with an easy way to scroll to div the elements, a scroll is an event which sent an element to the user when user scroll on different elements, the scroll() method of JavaScript will allow to check whether the page is scrolling or not, the jQuery library we have to add before to write the script.
Example #1
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>jQuery scroll to div</title>
<meta charset="utf-8">
<style>
h1{font-size: 40px;}
p{font-size: 35px;}
#top a {padding: 10px}
</style>
<!-- include jQuery library-->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('a[href*=\\#]:not([href=\\#])').on('click', function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1)+']');
if (target.length){
$('html,body').animate({scrollTop: target.offset().top}, 1000);
return false;}
</script>
</head>
<body>
<div id="top">
<a href="#Section1"> Go Section1</a>|
<a href="#Section2"> Go Section2</a>|
<a href="#Section3"> Go Section3</a>|
<a href="#Section4"> Go Section4</a>|
<a href="#Section5"> Go Section5</a>|
</div>
<div id="Section1">
<h1>Section 1</h1>
<p>This is section 1</p>
</div>
<div id="Section2">
<h1> Section 2</h1>
<p>This is section 2</p>
</div>
<div id="Section3">
<h1>Section 3</h1>
<p>This is section 3</p>
</div>
<div id="Section4">
<h1>Section 4</h1>
<p>This is section 4</p>
</div>
<div id="Section5">
<h1>Section 5</h1>
<p>This is section 5</p>
</div>
</body>
</html>(Note: We can also write the above code in different files such as HTML, JavaScript.)
Output:
In this example, we have used the jQuery scrollTop() method and defined anchor links at the top of the page, in the body of the HTML code we have written five sections, the scroll() method checks for the sections which are scrolling.
Example #2
Html file:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>jQuery scroll to div</title>
<meta charset="utf-8">
</head>
<body>
<div id="top">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
</div>
<div id="section1">
<!-- Content goes here -->
</div>
<div id="section2">
<a href="#top">GoToTop</a>
<!-- Content goes here -->
</div>
</body>
</html>
CSS file:
<style>
h1{font-size: 40px;}
p{font-size: 35px;}
#top a {padding: 10px}
</style>
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(function() {
$('a[href*=\\#]:not([href=\\#])').on('click', function () {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
});
});
</script>Output:
In this example of the scroll to div, we can add animation on a web page with the help of the animate() method and we took a toggle button by clicking on that button it gets toggled and we get a message that you have successfully toggled.
Conclusion
In this article, we conclude that there is a functionality of scripts through which we can add scrolling in our website and also we can easily use the auto-scroll to div in our website so that we can easily go through different-different section by clicking on the button without doing scrolling manually.
Recommended Articles
This is a guide to jQuery scroll to div. Here we discuss the Introduction, syntax, How to perform scroll to div in jQuery? and examples respectively. You may also have a look at the following articles to learn more –
