如何防止通过锚点击滚动顶部?

时间:2014-02-17 13:10:13

标签: jquery

我的HTML页面如下。我已经有了代码来阻止锚定点击滚动到位,但它不起作用。

请参阅上面网站的主页 - 在图像滑块jQuery之后,我已经放了jQuery Tab滑块,我点击特定标签,然后页面自动向上滚动。我不想要。

请帮我用jQuery解决这个问题。我在所有页面中使用jQuery选项卡滑块,所有页面都有相同的问题。

HTML代码......

<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>

2 个答案:

答案 0 :(得分:2)

对于没有任何js代码的简单锚<a>标记,可以阻止滚动顶部。

实施例: 我们应该使用href="#"

而不是href="#."

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

答案 1 :(得分:2)

我已经得到了解决方案,如下面的jQuery代码

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