# Adding Load More button for infinite scrolling of Ghost Casper

**URL:** <https://forum.ghost.org/t/adding-load-more-button-for-infinite-scrolling-of-ghost-casper/28102>\
**Category:** Developer help\
**Created:** [January 24, 2022, 10:09pm UTC](https://forum.ghost.org/t/adding-load-more-button-for-infinite-scrolling-of-ghost-casper/28102 "2022-01-24T22:09:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hakan](https://avatars.discourse-cdn.com/v4/letter/h/f1d935/32.png) [@hakan](https://forum.ghost.org/u/hakan)\
**Post date:** [January 24, 2022, 10:09pm UTC](https://forum.ghost.org/t/adding-load-more-button-for-infinite-scrolling-of-ghost-casper/28102/1 "2022-01-24T22:09:00Z")

</div>

I’m customizing the Casper theme and have some valuable links in footer. Auto Infinite scroll makes it impossible user to access footer as it keeps getting pushed down.

How can I add a LOAD MORE button and let visitor to click to load more article instead of automatically loading at scrolling?

Thank you!

---

<div class="post-metadata">

**Author:** ![hakan](https://avatars.discourse-cdn.com/v4/letter/h/f1d935/32.png) [@hakan](https://forum.ghost.org/u/hakan)\
**Post date:** [January 26, 2022, 12:17pm UTC](https://forum.ghost.org/t/adding-load-more-button-for-infinite-scrolling-of-ghost-casper/28102/2 "2022-01-26T12:17:28Z")

</div>

I guess I’m the only one struggling with this 😅

---

<div class="post-metadata">

**Author:** ![tq-bit](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tq-bit/32/14310_2.png) [@tq-bit](https://forum.ghost.org/u/tq-bit)\
**Post date:** [September 14, 2022, 11:23am UTC](https://forum.ghost.org/t/adding-load-more-button-for-infinite-scrolling-of-ghost-casper/28102/3 "2022-09-14T11:23:42Z")

</div>

Nope, you’re not. I’m investigating this one now as I need it for a custom theme. Will notify you once I’m making progress

---

<div class="post-metadata">

**Author:** ![tq-bit](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tq-bit/32/14310_2.png) [@tq-bit](https://forum.ghost.org/u/tq-bit)\
**Post date:** [September 14, 2022, 12:49pm UTC](https://forum.ghost.org/t/adding-load-more-button-for-infinite-scrolling-of-ghost-casper/28102/4 "2022-09-14T12:49:45Z")

</div>

Okay, I got something.

In the official [Casper theme](https://github.com/TryGhost/Casper/blob/main/assets/js/infinite-scroll.js), this problem is tackled using an infinite scroll.

I’ve taken the core of this function and migrated it into my own (Typescript) class.

1. I check if there are more items to load
2. If not, I hide the “Load More” button
3. If there are, I’m loading the next page with an XMLHttpRequest

This page has all the basic document methods, e.g., querySelectorAll. So I query my post items and inject them into my own DOM

This is my function to load the next page. You could use a similar approach if you left out all the types in JS

```plaintext
fetchNextPage(): Promise<Document> {
	return new Promise((resolve, reject) => {
		const xhr = new window.XMLHttpRequest();
		xhr.responseType = 'document';
		// @ts-ignore
		xhr.addEventListener('load', (event) => resolve(event.target.response));
		xhr.open('GET', this.nextElement.href);
		xhr.send(null);
	});
}

```

This is my method to load and append new items into the DOM

```plaintext
private async loadAndAppendPosts() {
	const nextPage = await this.fetchNextPage();
	const postCards = nextPage.querySelectorAll('.postcard');
	const postFeeds = nextPage.querySelectorAll('.postfeed');
	postCards.forEach((card) => this.postContainer.appendChild(document.importNode(card, true)));
	postFeeds.forEach((feed) => this.feedContainer.appendChild(document.importNode(feed, true)));
	this.nextElement = nextPage.querySelector('link[rel=next]');
}

```

And finally, this is the function I bind to the button:

```plaintext
private async loadMorePosts() {
	if (this.nextElement) {
		return this.loadAndAppendPosts();
	}
	this.loadMoreButton.remove();
}

```

```plaintext
public init() {
	if (!this.nextElement) {
		this.loadMoreButton.remove();
	}
	if (this.valid) {
		this.loadMoreButton.addEventListener('click', () => this.loadMorePosts());
	}
}

```