如何在 Tampermonkey 脚本上添加下一个/上一个按钮分页？

Question

I have the following Tampermonkey script

// ==UserScript==
// @name         easyEye
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Read your web novel easily on mobile with paginated content
// @author       Zimorok
// @match        *://boxnovel.com/*
// @require      http://code.jquery.com/jquery-latest.js
// @grant        none
// ==/UserScript==
var $ = window.jQuery
$(document).ready(function() {
    'use strict';

    var chapterText = $("div.reading-content p").each(function(){
                        $(this).clone().wrap('<p>').parent().html();
                        });

    //--div.read-container
    //--replace the whole div text with only the chapterText
    $('div.text-left').wrap('<div id="story">').html(chapterText);

//--https://stackoverflow.com/questions/12202324/split-text-into-pages-and-present-separately-html5
var contentBox = $('div.text-left');
var words = contentBox.html().split(' ');
function paginate() {
    var newPage = $('<div class="page">').css({'border':'1px solid black','text-align':'justify','padding':'5px'});
    contentBox.empty().append(newPage);
    var pageText = null;
    for(var i = 0; i < words.length; i++) {
        var betterPageText;
        if(pageText) {
            betterPageText = pageText + ' ' + words[i];
        } else {
            betterPageText = words[i];
        }
        newPage.html(betterPageText);
        if(newPage.height() > $(window).height()) {
            newPage.html(pageText);
            newPage.clone().insertBefore(newPage)
            pageText = null;
        } else {
            pageText = betterPageText;             
        }
    }
}

$(window).resize(paginate).resize();
$('html, body').animate({ scrollTop: $('#story').offset().top }, 'slow'); //--focus to the story
//--debug
console.log('')
});

This renders the site for an easy reading of the novel on mobile. How to add the next/previous button so I don't have to scroll to the next page?

Or is it possible to add touch-to-next page? Thanks!

Answer 1

i have manage to do the button but now it is blocking the div below.

// ==UserScript==
// @name         easyEye
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Read your web novel easily on mobile with paginated content
// @author       Zimorok
// @match        *://boxnovel.com/*
// @require      http://code.jquery.com/jquery-latest.js
// @grant        GM_addStyle
// ==/UserScript==
GM_addStyle("#navbar{overflow:hidden;background-color:#333}#navbar a{float:left;display:block;color:#f2f2f2;text-align:center;padding:14px;text-decoration:none}.content{padding:16px}.sticky{position:fixed;top:0;width:100%}.sticky+.content{padding-top:60px}");
var $ = window.jQuery
$(document).ready(function() {
    'use strict';

    var chapterText = $("div.reading-content p").each(function(){
                        $(this).clone().wrap('<p>').parent().html();
                        });

    //--div.read-container
    //--replace the whole div text with only the chapterText
    $('div.text-left').wrap('<div id="story">').html(chapterText);

//--https://stackoverflow.com/questions/12202324/split-text-into-pages-and-present-separately-html5
var contentBox = $('div.text-left');
var words = contentBox.html().split(' ');
function paginate() {
    var newPage = $('<div class="page">').css({'border':'1px solid black','text-align':'justify','padding':'5px'});
    contentBox.empty().append(newPage);
    var pageText = null;
    for(var i = 0; i < words.length; i++) {
        var betterPageText;
        if(pageText) {
            betterPageText = pageText + ' ' + words[i];
        } else {
            betterPageText = words[i];
        }
        newPage.html(betterPageText);
        if(newPage.height() > $(window).height()) {
            newPage.html(pageText);
            newPage.clone().insertBefore(newPage)
            pageText = null;
        } else {
            pageText = betterPageText;
        }
    }
    //--create the page ID and add the div.page
    $('div.page').each(function(index){
        $(this).prop('id','page_'+index);
    });

    //--creating next/previous button
    //--append the next/previous button
    var nav = $('<div id="navbar">');
    contentBox.prepend(nav);
    for(var pn = 0; pn < $('div.page').length; pn++)
    {
        nav.append('<a href="#page_'+pn+'">'+pn+'</a>');
    }
    //--simple numbering and scroll-to 
    $("a[href^='#']").click(function(e) {
    e.preventDefault();

    var position = $($(this).attr("href")).offset().top;

    $("body, html").animate({
        scrollTop: position
    } /* speed */ );
    });

}

$(window).resize(paginate).resize();
$('html, body').animate({ scrollTop: $('#story').offset().top }, 'slow'); //--focus to the story

//fixed page button
var num = 200; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('#navbar').addClass('sticky');
    } else {
        $('#navbar').removeClass('sticky');
    }
});

//--debug
console.log('Pages: '+$('div.page').length);
});

my #navbar will block a part of the top page . how to avoid it so that when i click on the #navbar , it will show the top div?