AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery scroll()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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()
$(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:

<!DOCTYPE html>
<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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...