js 模仿錨點定位的實現(xiàn)方法
如下所示:
<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 = $('#scroll_nav').find('a') , target_ul = $('#designer_nav_name') , _top = 0; $.each(navLinks , function( i , elem ){ $(elem).attr('data-to' , i == 0 ? 0 : _top); var id = $(elem).attr('data-nav'); var _h4 = $('#'+id).parent(); _top = parseInt(_h4.next().height()) + _top + parseInt(_h4.height()); $(elem).bind('click', function(){ target_ul[0].scrollTop = $(this).attr('data-to'); return false; }); }); $('#designer_nav_name li').click(function( e ){ var designer_name_href= $(this).find('a').attr("href"); $.getJSON("test.php?action=test&jsoncallback=?&testid="+testidhref,function(data){ $('#Ttai').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>
以上這篇js 模仿錨點定位的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript?數(shù)組方法filter與reduce
這篇文章主要介紹了JavaScript?數(shù)組方法filter與reduce,在ES6新增的數(shù)組方法中,包含了多個遍歷方法,其中包含了用于篩選的filter和reduce2022-07-07微信小程序?qū)崿F(xiàn)頂部固定 底部分頁滾動效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頂部固定底部分頁滾動效果,本文大概給大家分享三種解決方案,每種方案給大家詳細(xì)剖析通過代碼解析哪種方案更適合,感興趣的朋友跟隨小編一起看看吧2022-10-10js實現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
這篇文章主要介紹了js實現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法,結(jié)合實例形式分析了vue.js及jQuery數(shù)據(jù)綁定相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-02-02理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個閉包
在閱讀本博文之前,請先閱讀《理解Javascript_13_執(zhí)行模型詳解》 在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問題,這一篇博文將詳細(xì)的說明函數(shù)對象、作用域鏈與執(zhí)行上下文的關(guān)系。2010-10-10移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的介紹與使用技巧
在日常的移動端開發(fā)時,一般都是試用chrome瀏覽器的移動端模式進(jìn)行開發(fā)和調(diào)試,只有在chrome調(diào)試完成,而最近發(fā)現(xiàn)了一個新的調(diào)試方法,所以這篇文章主要給大家介紹了關(guān)于移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的基本資料,以及其使用的一些技巧,需要的朋友可以參考下。2017-10-10bootstrap treeview 擴展addNode方法動態(tài)添加子節(jié)點的方法
bootstrap-treeview 是一款基于Jquery+bootstrap的樹控件,這篇文章主要介紹了bootstrap treeview 擴展addNode方法動態(tài)添加子節(jié)點的方法,需要的朋友可以參考下2017-11-11JavaScript判斷瀏覽器對CSS3屬性是否支持的多種方法
其實在使用css3的一些屬性時,為了兼顧低端瀏覽器對CSS3的不友好性,往往需要知道某些瀏覽器是否支持要使用的CSS3屬性,以此來做向下適配。比如常見的CSS3動畫就很有必要檢測瀏覽器是否支持。下面本文就分享了幾種方法,有需要的朋友們可以參考借鑒。2016-11-11javascript function(函數(shù)類型)使用與注意事項小結(jié)
這篇文章主要介紹了javascript function(函數(shù)類型)使用與注意事項,結(jié)合實例形式較為詳細(xì)的分析了Function(函數(shù))類型的基本聲明、屬性、方法相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2019-06-06