如何重定向到带有猫头鹰轮播的其他HTML页面的特定部分

Question

I want to redirect the user to a particular section of an html page.

 // javascript for owl $(document).ready(function(){ $('.owl-two').owlCarousel({ loop:true, margin:10, nav:true, autoplay:true, responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1000:{ items:3 } } }); }); 

 <!-- nav--> <ul class="dropdown-menu"> <li><a href="salon_services.php#hair">Hair</a></li> <li><a href="salon_services.php#nail">Nail</a></li> <li><a href="salon_services.php#wax">Wax</a></li> </ul> <!-- owl carousel in salon services page--> <div id="nail" class="row" > <br> <br> <h3 class="text-center">Our Nail Services</h3> <br> <!-- nail carousal--> <div class="owl-two owl-carousel owl-theme"> <div class="item"><img src="images/n1.jpg" alt="Image" class=" img-thumbnail"> <h4 class="text-center">Manicure</h4> </div> <div class="item"><img src="images/n2.jpg" alt="Image" class=" img-thumbnail"> <h4 class="text-center">Pedicure</h4> </div> <div class="item"><img src="images/n3.jpg" alt="Image" class=" img-thumbnail"> <h4 class="text-center">Nail Painting and Design</h4> </div> <div class="item"><img src="images/n4.jpg" alt="Image" class=" img-thumbnail"> <h4 class="text-center">Nail Extensions</h4> </div> </div> 

I want to redirect the user directly from nav dropdown to another page's div containing that content. The page to which I want to redirect has 3 owl carousels.

I have already tried the html id redirect. <a href="#id"> , but it does not works completely. The page redirects briefly to the section but scrolls automatically to the top of the page.

I am using the owl carousel and think that owl javascript is the responsible factor for this as I have tested it with removing owl and it works, also the id redirect works fine when done from the same page (ieservices page ). I have 3 carousels 1.hair 2.nail 3.wax Kindly help I want to keep owl and the section redirect function. Thanks.

Answer 1

 .sec { width: 100%; height: 100vh; background-color: #ccc; margin-bottom: 12px; } 

 <ul> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#Four">Four</a></li> </ul> <div id="one" class="sec"> <h1>One</h1> </div> <div id="two" class="sec"> <h1>Two</h1> </div> <div id="three" class="sec"> <h1>Three</h1> </div> <div id="four" class="sec"> <h1>Four</h1> </div>