Maison  >  Article  >  interface Web  >  Comment imiter le positionnement du point d'ancrage dans js

Comment imiter le positionnement du point d'ancrage dans js

高洛峰
高洛峰original
2017-01-04 17:41:131374parcourir

Comme indiqué ci-dessous :

<div class="designer-bg ov">
<div class="w-77 f-l designer-nav">
    <ul id="scroll_nav">
     <li class="designer-nav-li"><a href="" title="" data-nav="a">A - E</a></li>
     <li class="designer-nav-li"><a href="" title="" data-nav="f">F - L</a></li>
     <li class="designer-nav-li"><a href="" title="" data-nav="m">M - T</a></li>
     <li class="designer-nav-li"><a href="" title="" data-nav="u">U - Z</a></li>
    </ul>
</div>
                                <script type="text/javascript">
$(function(){
    var navLinks = $(&#39;#scroll_nav&#39;).find(&#39;a&#39;) , target_ul = $(&#39;#designer_nav_name&#39;) , _top = 0;
    $.each(navLinks , function( i , elem ){
        $(elem).attr(&#39;data-to&#39; , i == 0 ? 0 : _top);
        var id = $(elem).attr(&#39;data-nav&#39;);
        var _h4 = $(&#39;#&#39;+id).parent();
        _top = parseInt(_h4.next().height()) + _top + parseInt(_h4.height());
         
        $(elem).bind(&#39;click&#39;, function(){
            target_ul[0].scrollTop = $(this).attr(&#39;data-to&#39;);
            return false;
        });
    });
    $(&#39;#designer_nav_name li&#39;).click(function( e ){
        var designer_name_href= $(this).find(&#39;a&#39;).attr("href"); 
        $.getJSON("test.php?action=test&jsoncallback=?&testid="+testidhref,function(data){
            $(&#39;#Ttai&#39;).html(data.catwalk);
        });
        e.preventDefault();
    });
})
                                </script>
<div class="f-r designer-index" id="designer_nav_name">
                                 
<h4><a name="a" id="a"><strong>A</strong></a></h4>
<ul>
<li></li>
</ul>
<h4><a name="f" id="f"><strong>F</strong></a></h4>
<ul>
<li></li>
</ul><h4><a name="m" id="m"><strong>M</strong></a></h4><ul>
<li></li>
</ul><h4><a name="u" id="u"><strong>U</strong></a></h4><ul>
<li></li>
</ul>
</div> </div>

La méthode d'implémentation js ci-dessus pour imiter le positionnement de l'ancre est tout le contenu partagé par l'éditeur. J'espère qu'elle pourra vous donner une référence et j'espère que vous la soutiendrez. plus. Site Web chinois PHP.

Pour plus de méthodes d'implémentation de positionnement de point d'ancrage d'imitation js et d'articles connexes, veuillez faire attention au site Web PHP chinois !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn