Updated February 22, 2023
Introduction to jQuery Scroll Anchor
jQuery scroll anchor allows us to quickly move between portions of our page without manually scrolling up and down. Anchor links also benefit from smooth scrolling. We need to discover a new means to scroll to a certain point on the page when a link is clicked because using the name property of the anchor element has been obsolete. We want to perform this playfully.
What is a jQuery scroll anchor?
- The web project’s user interface benefits from scroll anchor utilizing jQuery. Users’ attempts to scroll to a certain page section are reduced using a scroll anchor.
- By hitting an anchor link or button, the user can navigate to a specified part of the page with smooth scrolling.
- Scrolling to a div element is simple with the jQuery scrollTop function. Then, we may add motion to the page scroll using the jQuery animate method.
- For a single-page website, the scroll to div feature is beneficial. It allows the user to quickly get to a certain page section without having to scroll through the pages manually.
- The issue is that we want to incorporate a slide effect whenever we click a local anchor and want the page to move up or down correspondingly. Previously, we could accomplish it natively by utilizing CSS properties.
- Below is the syntax of the jQuery scroll anchor as follows.
Syntax –
html {
Scroll-behavior: smooth;
}- We can now achieve that with the help of jQuery by using the two methods.
- The jQuery offset method can be used to get the current location of any element in the document.
- This method comes in handy when we need to do drag-and-drop operations or place a new element on top of an existing one.
- The jQuery animate technique allows us to animate any numeric CSS property. To utilize the method, we need a CSS object.
- It’s possible to animate both style and non-style properties with this method.
- Internal anchors smoothly scroll the web page to a particular DIV within the content with this simple and lightweight jQuery smooth scroll plugin.
- Without manually scrolling up or down, smooth scrolling allows us to travel between page parts with only one click.
- Accessibility is a concern with any technology used for smooth scrolling. For example, when we click a #hash link, the browser defaults to focusing on the element with the same ID. The page may scroll, but that is merely a result of the attention shifting. This is something that jQuery is capable of.
How to use jQuery scroll anchor?
- A jQuery scroll anchor not bound to an element can be executed using the API. This method should be run inside the onclick event for the anchor tags so that we can access the target.
- Then we can figure out how to go to our desired location. But, first, we need to determine the exact point to scroll to now that offset is an absolute offset rather than a relative offset.
- The scrollIntoView method is used to scroll the user’s view to the element to which it is applied. The behavior property’s value of “smooth” will cause the page to scroll smoothly.
- Scrolling to a specific page region is accomplished with the scrollTop jQuery method. The scroll will be smoother if this method is animated.
- The anchor component of the href attribute value is set or returned using the hash property.
- By wrapping the scrollTop function within the animate method and specifying the length of the animation in milliseconds, the scrollTop method can be animated. The slower the animation, the higher the value.
Create jQuery scroll anchor
- To connect to a specific portion of a website, we frequently utilize the # (hash) in the href property of the HTML anchor element.
- For example, a href = #top can be used to scroll to the top of the current page, while a href = #bottom can be used to scroll to the bottom.
- When we click on the link, we will immediately be taken to a specific website spot.
- The below example shows that creating a jQuery scroll anchor is as follows.
Code –
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js"></script>
<style>
section { font: 15px Calibri; }
</style>
</head>
<body>
<section id ='top'>
We are on the top of the page
<p>
<a href ='#bottom'>
Click here to go to the end of the page where our page will end.
</a>
</p>
</section>
<p>
<img src ='../../images/theme/easy-image-resizer.jpg'
style ='width: 25%; margin: 100px 0 600px;'>
</p>
<section id ='bottom'>
We are at the top of the page.
<p>
<a href ='#top'>
Click here to go to the start of the page where our page will start.
</a>
</p>
</section>
</body>
<script>
$('a').click(function (e) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 1000);
});
</script>
</html>
Examples of jQuery Scroll Anchor
Below are the examples of jQuery Scroll Anchor:
Code –
<!DOCTYPE html>
<html>
<head>
<title>
Scroll the page by using jQuery scroll anchor
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jQuery/3.4.1/jQuery.min.js">
</script>
<script>
$(document).ready(function () {
$("a").on('click', function (event) {
if (this.hash !== "") {
event.preventDefault ();
var hash = this.hash;
$('html, body').animate ({
scrollTop: $(hash).offset().top
}, 500, function () {
window.location.hash = hash;
});
}
});
});
</script>
<style>
body,
html, .primary {
height: 150%;
}
section {
min-height: 150%;
}
</style>
</head>
<body>
<div>
<a href="#section1">
Click on this line to scroll on the color red.
</a>
</div>
<div>
<a href="#section2">
Click on this line to scroll to the color black.
</a>
</div>
<div>
<a href="#section3">
Click on this line to scroll to the color pink.
</a>
</div>
<div class="primary">
<section></section>
</div>
<div class="primary" id="section1">
<section style="background-color:red"> </section>
</div>
<div class="primary" id="section2">
<section style="background-color:black"> </section>
</div>
<div class="primary" id="section3">
<section style="background-color:pink"> </section>
</div>
</body>
</html>
- In the above example, we have used three tables. After clicking on the “Click on this line to scroll on color red” line, the cursor goes to the red page.
- After clicking on the “Click on this line to scroll on color black” line, the cursor goes on a black page.
- After clicking on the “Click on this line to scroll on color pink” line, the cursor goes to the pink page.
Conclusion
The jQuery animate technique allows us to animate any numeric CSS property. To utilize the method, we need a CSS object. JQuery scroll anchor will enable us to quickly move between portions of our page without manually scrolling up and down.
Recommended Articles
This is a guide to jQuery Scroll Anchor. Here we discuss what a jQuery scroll anchor is and How to use a scroll anchor, along with the examples. You may also look at the following articles to learn more –
