H5 List Page: Back-to-Top + Pagination (Inspired by the JD.com App)

Add-ons

2026-07-25 22:45 3 次浏览 • 0 次下载 12.6KB

H5 List Page: Back-to-Top + Pagination (Inspired by the JD.com App)

Plugin Description: Provides a back-to-top button and page number display (current page and total pages). Tested on H5; IE has not been tested.

Note: This plugin imitates the back-to-top button in the JD.com app. It does not include number animation effects. Please be aware of this.

Usage:

1. Before importing this plugin, import zepto.min.js or jquery.js.

1	`<script type="text/javascript"` `src="zepto.min.js"></script>`

var page_instance = $('#your-gotop-dom-id').pageination({
    // Whether to always display
    always: false,
    // Height at which pagination starts displaying. Pagination appears only after this height is reached. If always is not true, it will remain visible.
    startPos: 300,
    // Step height. The current page number increases or decreases by 1 for every scroll of this distance.
    stepHeight: 700,
    // Total number of pages. Required.
    total: 5，
    // Time for the pagination icon to change into the back-to-top icon. When the current page is the first page, this is the duration from when the back-to-top icon appears until it disappears.
    time: 1000
});

page_instance instance object, containing the parameters you pass, the DOM object it operates on, and two functions:
updateTotal: Updates the total number of pages
updateCul: Updates the current page number