Updated February 21, 2023
Introduction to jQuery Scroll Up
jQuery scroll up the vertical scrollbar position for the chosen components is set or returned by the scrollTop method. The position is 0 when the scrollbar is at the top. We can add and delete classes based on vertical scrolling Class Toggles with jQuery. JavaScript is commonly associated with web page creation, although it is also utilized in several non-browser applications.
jQuery scroll up overviews
- The number of pixels hidden from the view above the scrollable region determines the vertical scroll position.
- This number will be 0 if the scroll bar is at the top of the page or if the element cannot be scrolled.
- The number of pixels hidden from the view above the scrollable region determines the vertical scroll position. Each matched element’s vertical scroll will be positioned by setting the scrollTop property.
- The window Interface’s scrollTo method can be used to scroll to a specific position on the page.
- It takes two parameters: the x and y coordinates of the scrollable page. When both parameters are set to 0, the page will be scrolled to the top and leftmost points.
- ScrollUp is a simple jQuery plugin that allows us to create a custom “Scroll to Top” feature that works with any website.
- The scrollTo method in jQuery sets or returns a selected element’s vertical scrollbar location.
- By calling this method on the window property, we can leverage this behavior to scroll to the top of the page. The page is scrolled to the top when the position argument is set to 0.
- JQuery is a free JavaScript library that makes it easier to interface with HTML/CSS documents.
- After scrolling 100px, 500px, or to the bottom of the page, add a class to a certain div on the page.
- Adding or removing a specific div based on the scrolling position, we sometimes need to add a new class to a specific div to make modifications to that div that are dependent on the new change; thus, we must add a new class with the new CSS attribute.
How to use jQuery scroll up?
- To use jQuery scroll up, we need to include (the jQuery.scroll.up.min.js) file and need to add the following line in our code.
$ (function()
{
$.scrollUp();
});- Assign a proper CSS color to the active overlay setting to make a visible line to aid in determining an optimal scroll distance from the top. HEX, HSLA, or RGB are all possibilities.
- ScrollUp is completely customizable using CSS, making it easy to integrate into our project. Specify our styles in our CSS file to target the scrollUp’s created ID.
#scrollUp {
bottom: 10px;
right: 15px;
padding: 20px 30px;
background: #666;
color: #fff;
}- Use the jQuery scrollTop function to find the parchment position and add/remove DIV on up or down.
- In the wake of gazing above 100px, 500px, or the end of the page base, add a class to a specific div on-page. Adding/removing specific classes from a div based on the position.
- We need to add another class with the new CSS property to a specific div to roll out certain enhancements on that div. For example, we may include and exclude classes based on vertical parchment Class Toggles with jQuery.
How do remove Scroll down and scroll up?
- The opening in the wall. When the window is scrolled, the onscroll event occurs. When this function is overridden and set to a fixed place each time the scroll occurs, the scroll effect is effectively disabled.
- Using the window.pageYOffset and document.documentElement.scrollTop values, the current scroll position from the top may be determined.
- The current y scroll position may be found using these two properties. Because one of them may return 0 in some browsers, they’re utilized along with the OR operator.
- The below example shows how to remove scrolls up and down from the page.
Code –
<!DOCTYPE html>
<html>
<head>
<title>How to disable scrolling
temporarily using JavaScript?</title>
<style>
.scrollable-place {
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: Red"> Remove scroll up and scroll down
</h1>
<b>Remove scroll up and scroll down
using JavaScript?</b>
<p> Click on below button to remove scrolling from the current page</p>
<p class="scrollable-place">
<button onclick="disableScroll()"> Remove scroll down and scroll up</button>
</p>
<script>
function disableScroll () {
scrollTop =
window.pageYOffset || document.documentElement.scrollTop;
scrollLeft =
window.pageXOffset || document.documentElement.scrollLeft,
window.onscroll = function () {
window.scrollTo (scrollLeft, scrollTop);
};
}
</script>
</body>
</html>
In the above example, we have used the button name “Remove scroll up and scroll down,” after clicking on this button, it will disable the event of scroll up and scroll down.
Add scroll down and scroll up.
The below example shows that add scroll down and scroll up are as follows.
Code –
<!DOCTYPE html>
<html>
<head>
<title> Add scroll up and scroll down
</title>
<style>
.scroll {
height: 1000px;
background-color: lightgreen;
}
</style>
</head>
<body>
<center>
<div>
<button onclick="scrollToTop()">
Click on this button to go down the page.
</button>
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("html, body").animate({
scrollTop: $(
'html, body').get(0).scrollHeight
}, 2000);
});
});
</script>
<body>
<h1 style="color: Red">
Scroll Up and Scroll Down
</h1>
<b> JQuery scroll up and scroll down </b>
<p>Click on the above button to go down of the page and click on the below button to go on up of the page.</p>
<p class="scroll"> Add scroll up and scroll down</p>
<button onclick="scrollToTop()">
Click on this button to go up the page.
</button>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>
- In the above example, we have used two buttons. After clicking on “Click on this button to go down of the page,” the arrow goes down to the page.
- After clicking on “Click on this button to go up of the page,” the arrow goes up to the page.
Conclusion
ScrollUp is a simple jQuery plugin that allows us to create a custom “Scroll to Top” feature. The scrollTo method in jQuery sets or returns a selected element. For example, JQuery scroll up the vertical scrollbar position for the components is set or returned by the scrollTop method.
Recommended Articles
This is a guide to jQuery Scroll Up. Here we discuss the jQuery scroll-up overviews and How to remove Scroll down and scroll up. You may also look at the following articles to learn more –
