我已经用javascript创建了一个菜单。用户需要单击汉堡菜单图标将其打开。打开后，会有一个带有各种选项的手风琴菜单。我使用jscrollpane jquery插件进行滚动条样式，因为我希望能够控制MS Edge中的样式。
我遇到的问题是，当我点击带有许多列表项目的手风琴项目（菜单中的A类或B类）时，向下滚动菜单时总会反弹回到顶部。它并不仅仅停留在项目列表的底部。我相信这是由jscrollpane插件引入的，但我不确定。我花了好几个小时做出改变，而且无法修复它。非常感谢任何帮助。
这是一个包含所有代码的plunker，您可以在其中查看它的运作方式： https://plnkr.co/edit/uPh87hA7r3HlsL2DYBAO
这是主索引文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="css/jquery.jscrollpane.css">
<script src="js/menu.js"></script>
<link media="all" href="css/style.css" rel="stylesheet">
</head>
<body>
<nav id="menu"></nav>
<div id="datas">
<div id="nav" class="open-close">
<div id="navtitle">MENU</div>
<a href="#" class="opener add"><span>menu</span></a>
<ul class="slide">
<li id="itemdialog" class="nolink">Select item</li>
<div id="accordion">
<h3>Class A</h3>
<div>
<div class="item aush"><div class="itemname">Aush</div><div class="scientificname">Puffinus lherminieri</div></div>
<div class="item blra"><div class="itemname">Blra</div><div class="scientificname">Laterallus jamaicensis</div></div>
<div class="item blsk"><div class="itemname">Blsk</div><div class="scientificname">Rynchops niger</div></div>
<div class="item bwha"><div class="itemname">Bwha</div><div class="scientificname">Buteo platypterus</div></div>
<div class="item cw"><div class="itemname">Cw</div><div class="scientificname">Setophaga cerulea</div></div>
<div class="item osp"><div class="itemname">Osp</div><div class="scientificname">Pandion haliaetus</div></div>
<div class="item redh"><div class="itemname">Redh</div><div class="scientificname">Aythya americana</div></div>
<div class="item whcr"><div class="itemname">Whcr</div><div class="scientificname">Grus americana</div></div>
<div class="item wt"><div class="itemname">Wt</div><div class="scientificname">Hylocichla mustelina</div></div>
</div>
<h3>Class B</h3>
<div>
<div class="item tarpon"><div class="itemname">Tarpon</div><div class="scientificname">Megalops atlanticus</div></div>
<div class="item bm"><div class="itemname">Blm</div><div class="scientificname">Makaira nigricans</div></div>
<div class="item bft"><div class="itemname">Bft</div><div class="scientificname">Thunnus thynnus</div></div>
<div class="item bus"><div class="itemname">Bus</div><div class="scientificname">Carcharhinus leucas</div></div>
<div class="item df"><div class="itemname">Df</div><div class="scientificname">Coryphaena hippurus</div></div>
<div class="item gagg"><div class="itemname">Gagg</div><div class="scientificname">Mycteroperca microlepis</div></div>
<div class="item gulfm"><div class="itemname">Gulfm</div><div class="scientificname">Brevoortia patronus</div></div>
<div class="item gulfs"><div class="itemname">Gulfsn</div><div class="scientificname">Acipenser oxyrinchus</div></div>
<div class="item mutts"><div class="itemname">Mutts</div><div class="scientificname">Lutjanus analis</div></div>
<div class="item sb"><div class="itemname">Sb</div><div class="scientificname">Morone saxatilis</div></div>
<div class="item ws"><div class="itemname">Ws</div><div class="scientificname">Rhincodon typus</div></div>
</div>
<h3>Class C</h3>
<div>
<div class="item sw"><div class="itemname">Sw</div><div class="scientificname">Physeter macrocephalus</div></div>
<div class="item man"><div class="itemname">Man</div><div class="scientificname">Trichechus manatus</div></div>
</div>
<h3>Class D</h3>
<div>
<div class="item gst"><div class="itemname">Gst</div><div class="scientificname">Chelonia mydas</div></div>
<div class="item kemps"><div class="itemname">Kemps</div><div class="scientificname">Lepidochelys kempii</div></div>
<div class="item lbst"><div class="itemname">Lbst</div><div class="scientificname">Dermochelys coriacea</div></div>
<div class="item lst"><div class="itemname">Lst</div><div class="scientificname">Caretta caretta</div></div>
</div>
</div>
<li id="aboutdialog">A Link</li>
<li id="clearall">Another Link</li>
</ul>
</div>
</div>
<script>
$(function(){
$('#nav > ul.slide').jScrollPane();
});
</script>
</body>
</html>
这是menu.js文件：
// main menu
jQuery(function(){
$('nav ul').addClass('slide js-slide-hidden');
$('li.dropdown a').attr('data-toggle', 'none');
initOpenClose();
});
// open-close init
function initOpenClose() {
jQuery('.open-close').openClose({
activeClass: 'active',
opener: '.opener',
slider: '.slide',
animSpeed: 400,
effect: 'slide'
});
}
/*
* jQuery Open/Close plugin
*/
;(function($) {
function OpenClose(options) {
this.options = $.extend({
addClassBeforeAnimation: true,
hideOnClickOutside: true,
activeClass:'active',
opener:'.opener',
slider:'.slide',
animSpeed: 400,
effect:'fade',
event:'click'
}, options);
this.init();
}
OpenClose.prototype = {
init: function() {
if(this.options.holder) {
this.findElements();
this.attachEvents();
this.makeCallback('onInit');
}
},
findElements: function() {
this.holder = $(this.options.holder);
this.opener = this.holder.find(this.options.opener);
this.slider = this.holder.find(this.options.slider);
},
attachEvents: function() {
// add handler
var self = this;
this.eventHandler = function(e) {
e.preventDefault();
if (self.slider.hasClass(slideHiddenClass)) {
self.showSlide();
} else {
self.hideSlide();
}
};
self.opener.bind(self.options.event, this.eventHandler);
// hover mode handler
if(self.options.event === 'over') {
self.opener.bind('mouseenter', function() {
self.showSlide();
});
self.holder.bind('mouseleave', function() {
self.hideSlide();
});
}
// outside click handler
self.outsideClickHandler = function(e) {
if(self.options.hideOnClickOutside) {
var target = $(e.target);
if (!target.is(self.holder) && !target.closest(self.holder).length) {
self.hideSlide();
}
}
};
// set initial styles
if (this.holder.hasClass(this.options.activeClass)) {
$(document).bind('click touchstart', self.outsideClickHandler);
} else {
this.slider.addClass(slideHiddenClass);
}
},
showSlide: function() {
$('#pane').removeClass('hide');
$('#pane').addClass('show');
var self = this;
if (self.options.addClassBeforeAnimation) {
self.holder.addClass(self.options.activeClass);
}
self.slider.removeClass(slideHiddenClass);
$(document).bind('click touchstart', self.outsideClickHandler);
self.makeCallback('animStart', true);
toggleEffects[self.options.effect].show({
box: self.slider,
speed: self.options.animSpeed,
complete: function() {
if (!self.options.addClassBeforeAnimation) {
self.holder.addClass(self.options.activeClass);
}
self.makeCallback('animEnd', true);
}
});
},
hideSlide: function() {
$('#pane').removeClass('show');
$('#pane').addClass('hide');
var self = this;
if (self.options.addClassBeforeAnimation) {
self.holder.removeClass(self.options.activeClass);
}
$(document).unbind('click touchstart', self.outsideClickHandler);
self.makeCallback('animStart', false);
toggleEffects[self.options.effect].hide({
box: self.slider,
speed: self.options.animSpeed,
complete: function() {
if (!self.options.addClassBeforeAnimation) {
self.holder.removeClass(self.options.activeClass);
}
self.slider.addClass(slideHiddenClass);
self.makeCallback('animEnd', false);
}
});
},
destroy: function() {
this.slider.removeClass(slideHiddenClass).css({display:''});
this.opener.unbind(this.options.event, this.eventHandler);
this.holder.removeClass(this.options.activeClass).removeData('OpenClose');
$(document).unbind('click touchstart', this.outsideClickHandler);
},
makeCallback: function(name) {
if(typeof this.options[name] === 'function') {
var args = Array.prototype.slice.call(arguments);
args.shift();
this.options[name].apply(this, args);
}
}
};
// add stylesheet for slide on DOMReady
var slideHiddenClass = 'js-slide-hidden';
$(function() {
var tabStyleSheet = $('<style type="text/css">')[0];
var tabStyleRule = '.' + slideHiddenClass;
tabStyleRule += '{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}';
if (tabStyleSheet.styleSheet) {
tabStyleSheet.styleSheet.cssText = tabStyleRule;
} else {
tabStyleSheet.appendChild(document.createTextNode(tabStyleRule));
}
$('head').append(tabStyleSheet);
});
// animation effects
var toggleEffects = {
slide: {
show: function(o) {
o.box.stop(true).hide().slideDown(o.speed, o.complete);
},
hide: function(o) {
o.box.stop(true).slideUp(o.speed, o.complete);
}
},
fade: {
show: function(o) {
o.box.stop(true).hide().fadeIn(o.speed, o.complete);
},
hide: function(o) {
o.box.stop(true).fadeOut(o.speed, o.complete);
}
},
none: {
show: function(o) {
o.box.hide().show(0, o.complete);
},
hide: function(o) {
o.box.hide(0, o.complete);
}
}
};
// jQuery plugin interface
$.fn.openClose = function(opt) {
return this.each(function() {
jQuery(this).data('OpenClose', new OpenClose($.extend(opt, {holder: this})));
});
};
//ACCORDION
$( function() {
// allow more than one group to be open at once
$( "#accordion" ).accordion({
collapsible: true,
active: 'none'
});
// JSCROLLPANE
//init menu height
$('#nav > ul.slide').css('height', '270px');
var width = window.innerWidth,
height = window.innerHeight;
var calc = height - 140 + "px";
if (height >= 740){
$('h3#ui-id-1, h3#ui-id-3, h3#ui-id-5, h3#ui-id-7').click( function(){
if($(this).hasClass('ui-accordion-header-active')){
}else{
$('#nav > ul.slide, .jspContainer, .jspTrack, .jspDrag').css('height', '270px');
}
});
}else{
$('h3#ui-id-1, h3#ui-id-3, h3#ui-id-5, h3#ui-id-7').click( function(){
if($(this).hasClass('ui-accordion-header-active')){
$('#nav > ul.slide, .jspContainer, .jspTrack, .jspDrag').css('height', calc);
$('.jspContainer, .jspTrack, .jspDrag').css('overflow-y', 'scroll');
}else{
$('#nav > ul.slide, .jspContainer, .jspTrack, .jspDrag').css('height', '270px');
}
});
};
});
}(jQuery));
这是jscrollpane插件：http://jscrollpane.kelvinluck.com/