Infinite Ajax Scroll
Home
Examples
Pricing
Search…
Overview
Installation
Getting started
License
Support
Reference
Options
Methods
Events
Advanced
Triggers
Last page message
History
Overflow
Powered By
GitBook
Triggers
Instead of loading next pages on scroll you can use a trigger. A trigger is a link or button that has to be clicked before the next page is loaded.
Reasons for a trigger might be:
To make the footer reachable.
To ease the load on the server. Users have to click before loading the next page. This adds a natural delay.
First add a button to your document
1
<
button
class
=
"
load-more
"
>
Load More
</
button
>
Copied!
Next add a bit of CSS to make it look nice and hide if from view (opacity 0)
1
.load-more
{
2
display
:
inline-block
;
3
height
:
32px
;
4
padding
:
0 16px
;
5
border
:
1px solid #aaa
;
6
border-radius
:
4px
;
7
opacity
:
0
;
8
font-family
:
Lucida Grande
,
Lucida Sans Unicode
,
Lucida Sans
,
Geneva
,
Arial
,
sans-serif
;
9
font-size
:
14px
;
10
font-weight
:
400
;
11
line-height
:
30px
;
12
color
:
#555
;
13
background-color
:
#fff
;
14
cursor
:
pointer
;
15
transition
:
opacity .4s
;
16
}
17
​
18
.load-more:hover
{
19
color
:
#F63840
;
20
border
:
solid 1px #F63840
;
21
}
Copied!
Next configure the trigger.
1
let
ias
=
new
InfiniteAjaxScroll
(
/*..*/
,
{
2
// other options here
3
​
4
trigger
:
'.load-more'
5
});
Copied!
See
trigger options
for information.
​
View this behaviour in a live demo
​
Reference - Previous
Events
Next - Advanced
Last page message
Last modified
7mo ago
Copy link