Efeito scroll ao abrir uma <ul> específica em outra página
Ao clicar em uma categoria no index, será redirecionado para a pagina categories. html e preciso que faça um efeito de scroll até a <li> respectiva dessa página. Segue as imagens abaixo para exemplificar:
Primeira imagem: Clico na categoria Furnitures por exemplo.
Segunda imagem: Efeito scroll até a <ul> específica.
Ja possui um script que abre essa <ul> automaticamente após redirecionamento. Abaixo segue uma parte do código fonte:
Index.html
<div class="main-content">
<div class="w3-categories">
<h3>Browse Categories</h3>
<div class="container">
<div class="col-md-3">
<div class="focus-grid w3layouts-boder1">
<a class="btn-8" href="categories.html" class="scrollSuave">
<div class="focus-border">
<div class="focus-layout">
<div class="focus-image"><i class="fa fa-mobile"></i></div>
<h4 class="clrchg">Mobiles</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="focus-grid w3layouts-boder2">
<a class="btn-8" href="categories.html#parentVerticalTab2">
<div class="focus-border">
<div class="focus-layout">
<div class="focus-image"><i class="fa fa-laptop"></i></div>
<h4 class="clrchg"> Electronics & Appliances</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="focus-grid w3layouts-boder3">
<a class="btn-8" href="categories.html#parentVerticalTab3">
<div class="focus-border">
<div class="focus-layout">
<div class="focus-image"><i class="fa fa-car"></i></div>
<h4 class="clrchg">Cars</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="focus-grid w3layouts-boder4">
<a class="btn-8" href="categories.html#parentVerticalTab4">
<div class="focus-border">
<div class="focus-layout">
<div class="focus-image"><i class="fa fa-motorcycle"></i></div>
<h4 class="clrchg">Bikes</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="focus-grid w3layouts-boder5">
<a class="btn-8" href="categories.html#parentVerticalTab5">
<div class="focus-border">
<div class="focus-layout">
<div class="focus-image"><i class="fa fa-wheelchair"></i></div>
<h4 class="clrchg">Furnitures</h4>
</div>
</div>
</a>
</div>
Categories.html
<div class="categories-section main-grid-border">
<div class="container">
<h2 class="w3-head">All Categories</h2>
<div class="category-list">
<div id="parentVerticalTab">
<div class="agileits-tab_nav">
<ul class="resp-tabs-list hor_1">
<li>Mobiles</li>
<li>Electronics & Appliances</li>
<li>Cars</li>
<li>Bikes</li>
<li>Furniture</li>
<li>Pets</li>
<li>Books, Sports & Hobbies</li>
<li>Fashion</li>
<li>Kids</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
<a class="w3ls-ads" href="all-classifieds.html">View all Ads</a>
</div>
<div class="resp-tabs-container hor_1">
<span class="active total" style="display:block;" data-toggle="modal" data-target="#myModal"><strong>All USA</strong> (Select your city to see local ads)</span>
<div>
<div class="category">
<div class="category-img">
<img src="images/cat1.png" title="image" alt="" />
</div>
<div class="category-info">
<h4>Mobiles</h4>
<span>5,12,850 Ads</span>
<a href="all-classifieds.html">View all Ads</a>
</div>
<div class="clearfix"></div>
</div>
<div class="sub-categories">
<ul>
<li><a href="mobiles.html">mobile phones</a></li>
<li><a href="mobiles.html">Tablets</a></li>
<li><a href="mobiles.html">Accessories</a></li>
</ul>
</div>
</div>
<div>
<div class="category">
<div class="category-img">
<img src="images/cat2.png" title="image" alt="" />
</div>
<div class="category-info">
<h4>Electronics & Appliances</h4>
<span>2,01,850 Ads</span>
<a href="all-classifieds.html">View all Ads</a>
</div>
<div class="clearfix"></div>
</div>
<div class="sub-categories">
<ul>
<li><a href="electronics-appliances.html">Computers & accessories</a></li>
<li><a href="electronics-appliances.html">Tv - video - audio</a></li>
<li><a href="electronics-appliances.html">Cameras & accessories</a></li>
<li><a href="electronics-appliances.html">Games & Entertainment</a></li>
<li><a href="electronics-appliances.html">Fridge - AC - Washing Machine</a></li>
<li><a href="electronics-appliances.html">Kitchen & Other Appliances</a></li>
</ul>
</div>
</div>
<div>
<div class="category">
<div class="category-img">
<img src="images/cat3.png" title="image" alt="" />
</div>
<div class="category-info">
<h4>Cars</h4>
<span>1,98,080 Ads</span>
<a href="all-classifieds.html">View all Ads</a>
</div>
<div class="clearfix"></div>
</div>
<div class="sub-categories">
<ul>
<li><a href="cars.html">Commercial Vehicles</a></li>
<li><a href="cars.html">Other Vehicles</a></li>
<li><a href="cars.html">Spare Parts</a></li>
</ul>
</div>
</div>
<div>
<div class="category">
<div class="category-img">
<img src="images/cat4.png" title="image" alt="" />
</div>
<div class="category-info">
<h4>Bikes</h4>
<span>6,17,568 Ads</span>
<a href="all-classifieds.html">View all Ads</a>
</div>
<div class="clearfix"></div>
</div>
<div class="sub-categories">
<ul>
<li><a href="bikes.html">Motorcycles</a></li>
<li><a href="bikes.html">Scooters</a></li>
<li><a href="bikes.html">Bicycles</a></li>
<li><a href="bikes.html">Spare Parts</a></li>
</ul>
</div>
</div>
<div>
<div class="category">
<div class="category-img">
<img src="images/cat5.png" title="image" alt="" />
</div>
<div class="category-info">
<h4>Furniture</h4>
<span>1,05,168 Ads</span>
<a href="all-classifieds.html">View all Ads</a>
</div>
<div class="clearfix"></div>
</div>
<div class="sub-categories">
<ul>
<li><a href="furnitures.html">Sofa & Dining</a></li>
<li><a href="furnitures.html">Beds & Wardrobes</a></li>
<li><a href="furnitures.html">Home Decor & Garden</a></li>
<li><a href="furnitures.html">Other Household Items</a></li>
</ul>
</div>
</div>
<div>
SCRIPT dentro de categories.html
<script type="text/javascript">
$(document).ready(function() {
//Vertical Tab
$('#parentVerticalTab').easyResponsiveTabs({
type: 'vertical', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
tabidentify: 'hor_1', // The tab groups identifier
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#nested-tabInfo2');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
**Encontrei essa documentação:** [https://github.com/jellekralt/Responsive-Tabs#scroll-to-accordion-panel](https://github.com/jellekralt/Responsive-Tabs#scroll-to-accordion-panel)
**Parte da documentação:**
Scroll to Accordion panel
This options can be used to enable automatic scrolling to the accordion panel that has been openedscrollToAccordion: false, // (default) disables the auto scrolling to the accordion panel
scrollToAccordion: true, // enables the auto scrolling to the accordion panel
Scroll to Accordion panel on load
This option can be used to disabling the scrolling to an accordion panel on load
scrollToAccordionOnLoad: true, // (default) enables scrolling to accordion on load
scrollToAccordionOnLoad: false, // disables scrolling to accordion on load
You can define an offset in pixels for the scroll to accordion panel by setting the scrollToAccordionOffset option.
scrollToAccordionOffset: false, // (default) disables the auto scrolling to the accordion panel
scrollToAccordionOffset: true, // enables the auto scrolling to the accordion panel
porem não consegui utilizar esse efeito de scroll.
Obs.: Devo manter o código fonte do mesmo jeito, ordens do meu Boss.. ;S
Desde já agradeço.
Discussão (0)
Carregando comentários...