向jQuery BookBlock插件的URL添加分页

Question

我使用的是一个名为BookBlock的jQuery插件，它可以在Codrops demo here中找到

我已经像上面的例子一样成功地添加了分页，并将其更改为数字而不是点，但是我现在想知道是否可以将这些相同的数字添加到URL中？

例如，www.site.com/page/4/，如果用户访问该网址，他们会自动按分页顺序翻到该页面吗？

下面是我当前的代码：

var Page = (function() {
                var $container = $( '#bb-custom-grid' ); // Defines the area
                return {
                    init : function() {
                    $container.find('div.bb-bookblock').each(function(){
                        var $bookBlock = $( this ),
                            
                       // BookBlock Settings

                            bbs = $bookBlock.bookblock( {
                                speed : 800,
                                perspective : 2000,
                                shadowSides : 0.8,
                                shadowFlip  : 0.4
                            }); 

                       // Next and Prev Arrows
                            var $navNexts = $bookBlock.find( '.prev-arrow' ),
                            $navPrevs = $bookBlock.find( '.next-arrow' ).hide();
                            $navNexts.on( 'click', function() {
                                bbs.next(); 
                                return false;
                            } );
                            $navPrevs.on( 'click', function() {
                                bbs.prev();
                                return false;
                            } );

                     // Pagination

                        $('ul.numbered-pagination .end.page').attr('data-page-id',bbs.$items.length);
                        $.each( bbs.$items, function( key, value ) {
                            var classes = 'page';
                            if(key==0){
                               classes = 'active page';
                               }
                            
                            $('<li class="'+classes+'" data-page-id="'+(key+1)+'">'+(key+1)+'</li>').insertBefore('ul.numbered-pagination .end.page');
                            $('ul.numbered-pagination li.page').on( 'click', function() {
                            
                            bbs.jump(parseInt($(this).attr('data-page-id')));
                            $('ul.numbered-pagination .page').removeClass('active');
                            $(this).addClass('active');
                        });

                        });
                        
                   // Swiping Action
                            $bookBlock.children().on( {
                            'swipeleft'     : function( event ) {
                                bbs.next();
                                return false;
                            },
                            'swiperight'    : function( event ) {
                                bbs.prev();
                                return false;
                            }
                        } );
                    
                    });
                        }
                };
                
            })();
                }

任何帮助都将不胜感激！即使这只是解释为什么这可能是不可能的:)谢谢

Answer 1

configuration options允许使用startPage属性，因此您可以使用该属性从指定的页面开始。

如何确定URL值取决于您如何设置页面-例如，如果它是您的示例startPage，www.site.com/page/4/，您可以这样做：

var startPage = parseInt(document.location.href.match(/[0-9]+/)[0]);

一种不太麻烦的方法是使用查询字符串：www.site.com/?page=4

var startPage = parseInt(new URL(document.location.href).searchParams.get("page"));