jQuery scroll()
jQuery Tutorial » jQuery scroll()
What is a jQuery scroll?
With jQuery, we can scroll through the specified item we want, and the scroll() method is a built-in jQuery method. This is suitable for all browser windows, as well as for all items that can be scrolled.
The scroll() method is shipped off an element when the client is looking for a better place in the component.
Syntax:
$(selector).scroll (specified function)
How can use scroll event in jQuery?
Let's have an example of the scrolling method for a better understanding, as follows.
<!DOCTYPE html>
<html>
<head>
<title>Welcome In JQuery Scroll Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js">
</script>
<script>
$(document).ready(function() {
$("div").scroll(function() {
alert("scrolling Done");
});
});
</script>
<style>
div {
border: 2px solid rgb(146, 4, 4);
width: 360px;
height: 120px;
overflow: scroll;
}
</style>
</head>
<body>
<div>Welcome In JQuery Scroll Method!<br />
Welcome In JQuery Scroll Method!<br />
<p>
This technique works for every scrollable component and the program window.<br />
Boundary: This technique acknowledges single boundaries work which is discretionary. <br />
</p>
Welcome In JQuery Scroll Method!<br />
Welcome In JQuery Scroll Method!<br />
Welcome In JQuery Scroll Method!<br />
Welcome In JQuery Scroll Method!
</div>
</body>
</html>
Related subjects:
jQuery slideUp
jQuery fadeout
Effects hide / show
jQuery selectors
Tags: jQuery scroll to element, top, event, to id,into view, to bottom of div, to, down, jquery scroll to bottom, jquery scroll offset, not working
How can use scroll event in jQuery?
How can call scroll function in jQuery?
How do I scrollTo a specific element?
How do you trigger a scroll function?
jQuery Scroll To Top - Example
The scrollTo() method is used to scroll vertically to the top of the page, this behavior can be used to look at the highest point of the page by applying this strategy to the window property. For example:
<html>
<head>
<title>
Welcome in JQuery scrollto Windows () method. using JQuery!
</title>
<style>
.scroll {
height: 1200px;
width:320px;
background-color: #F9BC86;
}
</style>
</head>
<body>
<h1 style="color: rgb(109, 114, 109)">
Welcome in JQuery Home Page
</h1>
<b>
Hi this landing page of jQuery!
</b>
<p>
Now click on below button to scroll the window top.
</p>
<p class="scroll">
This is scrolling windows of jQuery
</p>
<button onclick="scrollToTop()">
Click here to scroll top
</button>
<script src="https://code.jQuery.com/jQuery-3.3.1.min.js">
</script>
<script>
function scrollToTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
scroll to different sections
How to scroll to different sections of the page by clicking different buttons, along with a scrolling effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous">
</script>
<title> How to scroll to specific item using jQuery? </title>
<style>
div {
color: #0f9d58;
border: 3px solid #0f9d58;
margin: 10px;
width: 300px;
height: 200px;
overflow: auto;
}
p {
width: 330px;
height: 330px;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<h1>Heading</h1>
<p id="p1"><strong>paragraph 1</strong><br />
jquery scroll to top of div<br />
jquery scroll to id<br />
jquery scroll to anchor<br />
jquery scroll to div from url hash<br />
jquery scroll to element<br />
</p>
<p id="p2"><strong>paragraph 2</strong><br />
jquery scroll to element<br />
jquery scroll position<br />
scroll to div javascript<br />
scroll down jquery<br /></p>
</div>
<button onclick="scrollParagraph1()">
paragraph 1
</button>
<button onclick="scrollParagraph2()">
paragraph 2
</button>
<script>
var container = $('div');
// Scrolls to paragraph 1
function scrollParagraph1() {
var scrollTo = $("#p1");
// Calculating new position
// of scrollbar
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
// Animating scrolling effect
container.animate({
scrollTop: position
});
}
// Scrolls to paragraph 2
function scrollParagraph2() {
var scrollTo = $("#p2");
// Calculating new position
// of scrollbar
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
// Animating scrolling effect
container.animate({
scrollTop: position
});
}
</script>
</body>
</html>
jquery scroll to element, top, event, to id,into view, to bottom of div, to, down, jquery scroll to bottom, jquery scroll offset, not working
How can use scroll event in jQuery?
How can call scroll function in jQuery?
How do I scrollTo a specific element?
How do you trigger a scroll function?
JQuery scroll() - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.