Updated April 18, 2023
Introduction to jQuery scroll plugin
The jQuery scroll plugin creates the horizontal and vertical scroll to the specified section of the page. The jQuery plugin is a new function used to extend the prototype object of jQuery. All jQuery objects inherit all the added functions by extending the prototype object. So it is used to extend the functionality of the scroll object or element.
Many plugins are available that help the developer create an attractive scrolling with animation for the web applications. Some of the plugins are given below –
- js – This jQuery plugin is used to create a website with full-screen scrolling.
- Horizontal Timeline – This jQuery plugin is used to create scrolls an easy to customize; JavaScript and CSS power it.
- Scroll Magic – This jQuery plugin allows the creation of the scrollbar like a progress bar, applies animation, and pins an element at the specific portion of the scroll.
- One Page Scroll – This jQuery plugin needs minimal setup to create a scrolling website, the speed, and looping property can be set, and it also supports SEO-friendly URLs for each page.
- jInvertScroll – It can manipulate the default scrolling behavior and force the horizontal scroll. It allows easily to create a parallax effect with an onScroll callback.
- simplyScroll – This jQuery plugin provides flexible content scroll with a tactile effect. It automatically does unequal-sized elements in loop mode.
- Scroll – This is a jQuery Scrolld.js open-source and unique plugin. It gives a function for the most precise scrolling for pixel-perfect layout and navigation using real-time updated data values.
- Smoove – This jQuery plugin allows to implementation of CSS3 transition effects easily.
- ScrollMe – This jQuery plugin helps to add a simple scrolling effect on the web page. It is straightforward to set up the page; it does not require a single line of JavaScript code. On scroll down the page, it scale, translate, rotate and change the opacity of an element of the page.
Examples for jQuery scroll plugin
Example of the jQuery scroll plugins by using the fullpage.js plugin. The steps to use the fullpage.js plugin are as follows.
First, download the fullpage.js plugin and unzip it. The unzipped folder contains the two main files, which are fullpage.js and fullpage.css files. Next, start the creating of our web page that is an Html file in the same folder, which is in the below example –
Code:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> This is an example for jQuery scroll plugin </title>
<meta name = "author" content = "Alvaro Trigo Lopez" />
<meta name = "keywords" content = "fullpage,jquery,demo,screen,fullscreen,navigation,control arrows, dots" />
<meta name = "description" content = "fullPage full-screen navigation and sections control menu." />
<meta name = "Resource-type" content = "Document" />
<link rel = "stylesheet" type = "text/css" href = "examples.css" />
<link rel = "stylesheet" type = "text/css" href = "../dist/fullpage.css" />
<style>
/* Style for h3 header texts
* --------------------------------------- */
h2{
font-size : 5em;
font-family : arial,helvetica;
color : #fff;
margin :0;
}
.intro p{
color : #f0f;
}
/* styles to control arrows for slides
* --------------------------------------- */
.controlArrow.prev {
left : 60px;
}
.controlArrow.next{
right : 60px;
}
/* Place texts in each section to the centered
* --------------------------------------- */
.section{
text-align : center;
}
/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
color : #ff0f;
}
</style>
</head>
<body>
<select id= "Menu">
<option selected>Choose Example </option>
<option id = "jquery-adapter">jQuery adapter</option>
<option id = "active-slide">Active section and slide</option>
<option id = "callbacks-v2-compatible">Callbacks version 2</option>
<option id = "auto-height">Auto height</option>
<option id = "autoplay-video-and-audio">Autoplay Video and Audio</option>
<option id = "backgrounds">Background images</option>
<option id = "backgrounds-fixed">Fixed fullscreen backgrounds</option>
<option id = "background-video">Background video</option>
<option id = "fixed-headers">Fixed headers</option>
<option id = "callbacks-v3">Callbacks version 3</option>
<option id = "parallax">Parallax</option>
<option id = "continuous-horizontal">Continuous horizontal</option>
<option id = "continuous-vertical">Continuous vertical</option>
<option id = "backgrounds">Background images</option>
<option id = "css3">CSS3</option>
<option id = "drag-and-move">Drag And Move</option>
<option id = "easing">Easing</option>
<option id = "fading-effect">Fading Effect</option>
<option id = "looping">Looping</option>
<option id = "gradient-backgrounds">Gradient backgrounds</option>
<option id = "navigation-horizontal">Horizontal navigation dots</option>
<option id = "methods">Methods</option>
<option id = "navigation-vertical">Vertical navigation dots</option>
<option id = "interlocked-slides">Interlocked Slides</option>
<option id = "normalScrollElements">Normal scroll elements</option>
<option id = "no-anchor">No anchor links</option>
<option id = "normal-scroll">Normal scrolling</option>
<option id = "one-section">One single section</option>
<option id = "offset-sections">Offset sections</option>
<option id = "navigation-tooltips">Navigation tooltips</option>
<option id = "scrollBar">Scroll bar enabled</option>
<option id = "reset-sliders">Reset sliders</option>
<option id = "responsive-auto-height">Responsive Auto Height</option>
<option id = "responsive-height">Responsive Height</option>
<option id = "responsive-slides">Responsive Slides</option>
<option id = "responsive-width">Responsive Width</option>
<option id = "scrollOverflow">Scroll inside sections and slides</option>
<option id = "scrollBar">Scroll bar enabled</option>
<option id = "scroll-horizontally">Scroll horizontally</option>
<option id = "scrolling-speed">Scrolling speed</option>
<option id = "scrollOverflow-reset">ScrollOverflow Reset</option>
<option id = "lazy-load">Lazy load</option>
<option id = "vue-fullpage">Vue-fullpage component</option>
<option id = "trigger-animations">Trigger animations</option>
</select>
<div id = "fullpage">
<div id = "section1" class = "section">
<div class="intro">
<h3> This is an example for jQuery scroll plugin : </h3>
<h2> Dots Navigation </h2>
<p> Navigate throw the sections in an easy and beautiful way. </p>
</div>
</div>
<div id = "section2" class = "section">
<div id = "slide1" class = "slide">
<div class="intro">
<h1> Page 1 Clickable </h1>
<p>
You can even click on the navigation and jump directly to another section.
</p>
</div>
</div>
<div id = "slide2" class = "slide" >
<h2> Page 2</h2>
</div>
</div>
<div id = "section3" class = "section">
<div class = "intro">
<h2> Page 3 </h2>
</div>
</div>
</div>
<script type = "text/javascript" src = "../dist/fullpage.js"></script>
<script type = "text/javascript" src = "examples.js"></script>
<script type = "text/javascript">
var myFullpage = new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', '3rdPage'],
sectionsColor : ['#C6000F', '#1BBC00', '#7E8F0C'],
navigationPosition: 'right',
navigation: true,
navigationTooltips: ['First page', 'Second page', 'Third page']
});
</script>
</body>
</html>An output of the above code is –
Once we click on the right-side second dot, the output is –
Once we click on the right-side third dot, the output is –
In the above code, the three sections of “div” elements are created. Next, the fullpage.js file is used by including the script section and applying the scrolling navigation to each section of the “div” elements, as shown in the above output.
Conclusion
It is used to extend the page scroll functionality; different types of jQuery scroll plugins are available with their specific features. These are used to create the horizontal and vertical scroll to the specified section of the page.
Recommended Articles
This is a guide to jQuery scroll plugin. Here we discuss the definition, syntax, and Examples for the jQuery scroll plugins. You may also have a look at the following articles to learn more –
