B2B mcsb autoskroll na aktivní li

by Petr Haluza

HTML

<link rel="stylesheet" href="https://b2b.100mega.cz/css/mcustomscrollbar/jquery.mCustomScrollbar.css">
<script src="https://b2b.100mega.cz/js/plugins/jquery/jquery.min.js"></script>
<script src="https://b2b.100mega.cz/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>
<link rel="stylesheet" href="https://b2b.100mega.cz/css/theme-default.css">
<div id="demo">napevno seskroluju k prvnímu li.active
      </div>


<div class="page-sidebar page-sidebar-fixed scroll mCustomScrollbar" data-mcs-theme="dark">

				<!-- START X-NAVIGATION -->
				<ul class="x-navigation ScrollFix">
					<li class="xn-logo">
						<a href="/">100MEGA Distribution s.r.o. </a>
						<a href="#" class="x-navigation-control"></a>
					</li>
					<!-- SEARCH -->
					<style>
						li.xn-search span#targetTest_message { display: none; }
					</style>
					<li class="xn-search">
						<form role="form" id="frm-searchForm" action="/cs/kategorie/100648?sortFiltrControl-style=1&amp;sortFiltrControl-sorttype=1&amp;sortFiltrControl-productsperpageFiltr=20&amp;sortFiltrControl-stock=0&amp;sortFiltrControl-stocktype=1&amp;sortFiltrControl-stistatus=0&amp;sortFiltrControl-stistatusrev=0&amp;sortFiltrControl-stoid=0" method="post">
							<input class="searchCat" type="hidden" name="searchCat" value="0" data-lfv-initialized="true" data-lfv-message-id="_message">
							<input autocomplete="off" id="targetTest" type="text" value="" placeholder="Hledat" name="search" required="" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;Zadejte hledaný výraz&quot;}]" data-lfv-initialized="true" data-lfv-message-id="targetTest_message">
							<button type="submit" class="x-hide-me btn btn-default active" data-lfv-initialized="true" data-lfv-message-id="_message_1">Hledej</button>
								<div class="x-hide-me" style="color: white; vertical-align: bottom;">
									<label class="x-hide-me" style="width: 100%">
										<input type="checkbox" style="height: 13px; width:...

CSS

/* jen demo stromu*/
#MainTrees ul ul {display:none}
#MainTrees ul.xt-tree li.active {background:red}
#MainTrees ul.xt-tree li.active ul {display:block}

/*demo mCustom skrollbaru*/
div#mCSB_1_scrollbar_vertical {  right: 0;}
div#mCSB_1 { overflow: hidden;}
.page-sidebar {width:250px;height:300px; border: 2px solid blue}

#demo {padding:1em; margin:1em; background:#d43a3a; color: white;;}

JavaScript

// inicialiyace mCSB
$(".mCustomScrollbar").mCustomScrollbar({
    axis:"y" // horizontal scrollbar
});

// pokus o šoupnutí na li.active (otevřený)
$(document).ready(function() {
  function skrolujNaActive() {     
    $("#mcs_container").mCustomScrollbar("scrollTo", ".xn-openable.active");
 }
 setTimeout(skrolujNaActive, 1000)
});