앵커 클릭으로 스크롤을 방지하는 방법은 무엇입니까?

Question

내 HTML 페이지가 아래에 있습니다. 이미 앵커 클릭 위치에서 스크롤을 방지하는 코드가 있지만 작동하지 않습니다.

위의 웹 사이트의 홈 페이지를 참조하십시오. 이미지 슬라이더 jQuery 다음에 jQuery Tab 슬라이더를 놓고 특정 탭을 클릭 한 다음 페이지를 자동으로 위로 스크롤하십시오. 나는 싫어.

jQuery를 사용하여이 문제를 해결할 수 있도록 도와주세요. 모든 페이지에서 jQuery 탭 슬라이더를 사용하고 모든 페이지에 동일한 문제가 있습니다.

HTML 코드 ... 어떤 JS 코드가없는 간단한 앵커 <a> 태그

<div id="divContent"> 
     <h3 class="home_title">YOUR TURNKEY PRIVATE LABEL SKIN CARE MANUFACTURER</h3> 
     <p class="home_title_text"> 
     Cosmetic Solutions is a leader in the development and manufacturing of scientifically proven, innovative personal care products. With a focus on, face, body, hair, OTC, and professional use formulations, we create some of the most cost effective, high quality and powerful products on the market. <br /><br/> 
     Providing world class services to up and coming businesses, large established brands, physicians, estheticians and other skin care professionals; we specialize in research & development, custom formulization, graphic design, manufacturing, packaging and delivery. <br /><br/> 
     Take advantage of our unrivaled and high quality Private Label and Contract OEM Manufacturing. Our state of the art facilities are perfectly equipped for the creation of any number of new or revised product lines. A one stop organization based out of South Florida, with over 20 years experience; we facilitate all aspects involved in the creation and manufacturing process. 
     </p> 
     <div id="divTabSlider"> 
      <ul id="tabs"> 
       <li><a href="#" onClick="return false;" name="#tab1">Your Brand</a></li> 
       <li><a href="#" onClick="return false;" name="#tab2">Formulations</a></li> 
       <li><a href="#" onClick="return false;" name="#tab3">Packaging + Decoration</a></li> 
       <li><a href="#" onClick="return false;" name="#tab4">Research + Development</a></li> 
       <li><a href="#" onClick="return false;" name="#tab5">Manufacturing</a></li> 
      </ul> 

      <div id="content"> 
       <div id="tab1"> 
        <table width="100%" cellpadding="2" cellspacing="2"> 
         <tr> 
          <td width="70%" align="left"> 
           Gladios manufactures cosmetics for third parties across the world with a clear misson to market them to international companies and distributors... 
           <br/><br/><br/><br/><br/><br/><br/><br/> 
           <a href="private-label.html#tab1" class="create_column"></a> 
          </td> 
          <td align="right"> 
           <img src="images/symbol_YOURBRAND.png" width="226px" height="226px" /> 
          </td> 
         </tr> 
        </table> 
       </div> 
       <div id="tab2">      
        <table width="100%" cellpadding="2" cellspacing="2"> 
         <tr> 
          <td width="70%" align="left"> 
           Gladios has the solutions for all your custom formulation needs. With our complete in-house applications laboratory, we can customize your product for a variety of applications... 
           <br/><br/><br/><br/><br/><br/><br/><br/> 
           <a href="private-label.html#tab2" class="create_column"></a> 
          </td> 
          <td align="right"> 
           <img src="images/formulation.png" width="226px" height="226px" /> 
          </td> 
         </tr> 
        </table> 
       </div> 
       <div id="tab3">      
        <table width="100%" cellpadding="2" cellspacing="2"> 
         <tr> 
          <td width="70%" align="left"> 
           Our Clients have an abundance of options from packaging components to choose from, all aesthetically pleasing and constructed from the highest qu... 
           <br/><br/><br/><br/><br/><br/><br/><br/> 
           <a href="private-label.html#tab3" class="create_column"></a> 
          </td> 
          <td align="right"> 
           <img src="images/Pack-and-decoration.png" width="226px" height="226px" /> 
          </td> 
         </tr> 
        </table> 
       </div> 
       <div id="tab4">      
        <table width="100%" cellpadding="2" cellspacing="2"> 
         <tr> 
          <td width="70%" align="left"> 
           As an ecological cosmetics laboratory we guarantee that our ecological cosmetics are formulated using ingredients grown with biological methods a... 
           <br/><br/><br/><br/><br/><br/><br/><br/> 
           <a href="manufacturing.html#tab1" class="create_column"></a> 
          </td> 
          <td align="right"> 
           <img src="images/development.png" width="226px" height="226px" /> 
          </td> 
         </tr> 
        </table> 
       </div> 
       <div id="tab5">      
        <table width="100%" cellpadding="2" cellspacing="2"> 
         <tr> 
          <td width="70%" align="left"> 
           Our manufacturing facility enables us to meet the special demands for our clients within the reasonable deadlines and deliver cost effective qual... 
           <br/><br/><br/><br/><br/><br/><br/><br/> 
           <a href="manufacturing.html#tab2" class="create_column"></a> 
          </td> 
          <td align="right"> 
           <img src="images/manufacturing.png" width="226px" height="226px" /> 
          </td> 
         </tr> 
        </table> 
       </div> 
      </div> 
      <script> 
       function resetTabs(){ 
        $("#content > div").hide(); //Hide all content 
        $("#tabs a").attr("id",""); //Reset id's  
       } 

       var myUrl = window.location.href; //get URL 
       var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2  
       var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab 

       (function(){ 
        $("#content > div").hide(); // Initially hide all content 
        $("#tabs li:first a").attr("id","current"); // Activate first tab 
        $("#content > div:first").fadeIn(); // Show first tab content 

        $("#tabs a").on("click",function(e) { 
         e.preventDefault(); 
         if ($(this).attr("id") == "current"){ //detection for current tab 
         return  
         } 
         else{    
         resetTabs(); 
         $(this).attr("id","current"); // Activate this 
         $($(this).attr('name')).fadeIn(); // Show content for current tab 
         } 
        }); 

        for (i = 1; i <= $("#tabs li").length; i++) { 
         if (myUrlTab == myUrlTabName + i) { 
          resetTabs(); 
          $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab 
          $(myUrlTab).fadeIn(); // Show url tab content   
         } 
        } 
       })() 
      </script> 
     </div> 
    </div> 

Answer 1

은 최고를 방지 할 수 스크롤합니다.

예 : 대신 href="#"을 사용하는 우리가 href="#."

예를 사용해야합니다.

<a href="#.">link</a> 

Answer 2

내가 jQuery를 코드

<script> 
      $("#tabs a").on("click",function(event) { 
       event.preventDefault(); 
      }); 
      </script>