B2B mcsb pamatování pozice

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">Rozklikni si konzoli vpravo dole<br>Někam seskroluj a refrešni jen tento frame (pravým tl.)
      </div>

<div id="toTop">
  <svg viewBox="0 0 48 48" width="38" height="38" xmlns="http://www.w3.org/2000/svg">
    <path id="toTop-bg" d="M0 0h48v48h-48z"></path>
    <path id="toTop-ar" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
  </svg>
</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...

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}

#toTop {display:none; position:absolute; z-index:99;top:95px; left: 100px;cursor:pointer}
#toTop svg { display: block; border-radius: 50%; width: 100%; height: 100%; opacity:.7}
#toTop-bg { fill: #1c2833; }
#toTop-ar { fill: white}
#toTop svg path { transition: all 0.3s}
#toTop:hover #toTop-bg { fill: #3fbae4}
#toTop:hover svg { opacity:1}

/*#mCSB_1_container {transition: top .35s ease 0s;}
*/
#demo {padding:1em; margin:1em; background:#d43a3a; color: white;;}

JavaScript

/*/ jen DEMO neni potřeba
$(window).load(function () {
  var nactenaPozice = localStorage.getItem('b2bStromPozice') || 0;
  console.log("načteno:" + nactenaPozice);
});
*/

// PŘIDAT do inicializace mCSB
$(".mCustomScrollbar").mCustomScrollbar({
    // po pohnutí stromem uložím pozici
    callbacks:{
    onScroll:function(){
      //console.log("uloženo:" + $("#mCSB_1_container").css('top'));
      localStorage.setItem('b2bStromPozice', $("#mCSB_1_container").css('top'));
    }
}
});


// nově přidat - funkce pro šoupnutí po načtení a zobrazení tlačítka
$(document).ready(function() {
	var nactenaPozice = localStorage.getItem('b2bStromPozice') || 0;
  function skrolujNaActive() {     
     $("#mCSB_1_container").animate({ "top": nactenaPozice }, 750); //šoupnutí na uloženou pozici po načtení stránky
 	}

	function ukazSkrolNahoru(){ // ukázat ikonku skrolu nahoru když seskroluju kus stromu
    if (parseInt(nactenaPozice) < -800) {
  		$('#toTop').fadeIn(500);
		}
    else {
    	$('#toTop').fadeOut(500);
    }
	}

 setTimeout(skrolujNaActive, 1000)
 setTimeout(ukazSkrolNahoru, 1500)
 
});

// nově přidat - klik na ikonku skrolu nahoru
$("#toTop").click(function(){
  $("#mCSB_1_container").animate({ "top": "0px" }, 750);
 	$('#toTop').fadeOut();
});