Menu scrolling
Posted: 18 Jun 2019, 10:32
How to keep menu scroll position after changing page when we have several menu items
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() {
...
}
...
}
...