Page 1 of 1

Menu scrolling

Posted: 18 Jun 2019, 10:32
by asyst
How to keep menu scroll position after changing page when we have several menu items

Re: Menu scrolling

Posted: 21 Jun 2019, 11:45
by mert.sincan
Please add the following js codes to layout.js;

Code: Select all

    /** 
 * PrimeFaces Apollo Layout
 */
PrimeFaces.widget.Apollo = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        ...
        this.nano = this.menuContainer.find('.nano');

        this._bindEvents();
 /*** Refactor the following lines ********/
        var nanoOptions = {flash:true};
        
        if(!this.isHorizontal() && !this.isSlim()) {
            this.restoreMenuState();
            this.bindMenuScroll();
            
            var scrollTop = $.cookie('apollo_menu_scrollPosTop');
            if (scrollTop != null) {
                nanoOptions['scrollTop'] = scrollTop;
            }
        }
        
        this.nano.nanoScroller(nanoOptions);
/********************end*************************/

        this.nano.children('.nano-content').removeAttr('tabindex');
    },
    
/** Add the following methods ****************/
    bindMenuScroll: function() {
        var $this = this;
        this.nano.on('update', function(e, values){
            $this.saveScrollPosition(values.position);
        });
    },
    
    saveScrollPosition: function(position) {
        $.cookie('apollo_menu_scrollPosTop', position, {path: '/'});
    },
    
    clearScrollPosition: function() {
        $.removeCookie('apollo_menu_scrollPosTop', {path: '/'});
    },
/*********************end***************************/

    _bindEvents: function() {
    ...
    }
    ...
}
...
Best Regards,