js 模仿錨點(diǎn)定位的實(shí)現(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 模仿錨點(diǎn)定位的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- js 定位到某個(gè)錨點(diǎn)的方法
- JS錨點(diǎn)的設(shè)置與使用方法
- JavaScript返回網(wǎng)頁(yè)中錨點(diǎn)數(shù)目的方法
- JavaScript組件焦點(diǎn)與頁(yè)內(nèi)錨點(diǎn)間傳值的方法
- javascript 動(dòng)態(tài)數(shù)據(jù)下的錨點(diǎn)錯(cuò)位問(wèn)題解決方法
- JavaScript for in錨點(diǎn)的動(dòng)態(tài)創(chuàng)建
- JS如何實(shí)現(xiàn)在頁(yè)面上快速定位(錨點(diǎn)跳轉(zhuǎn)問(wèn)題)
相關(guān)文章
javascript 隨機(jī)展示頭像實(shí)現(xiàn)代碼
隨機(jī)展示小頭像,隨機(jī)數(shù)包括 位置、層級(jí)、大小、透明度 等2011-12-12JavaScript?數(shù)組方法filter與reduce
這篇文章主要介紹了JavaScript?數(shù)組方法filter與reduce,在ES6新增的數(shù)組方法中,包含了多個(gè)遍歷方法,其中包含了用于篩選的filter和reduce2022-07-07微信小程序?qū)崿F(xiàn)頂部固定 底部分頁(yè)滾動(dòng)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頂部固定底部分頁(yè)滾動(dòng)效果,本文大概給大家分享三種解決方案,每種方案給大家詳細(xì)剖析通過(guò)代碼解析哪種方案更適合,感興趣的朋友跟隨小編一起看看吧2022-10-10js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
這篇文章主要介紹了js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法,結(jié)合實(shí)例形式分析了vue.js及jQuery數(shù)據(jù)綁定相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02理解Javascript_15_作用域分配與變量訪問(wèn)規(guī)則,再送個(gè)閉包
在閱讀本博文之前,請(qǐng)先閱讀《理解Javascript_13_執(zhí)行模型詳解》 在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問(wèn)題,這一篇博文將詳細(xì)的說(shuō)明函數(shù)對(duì)象、作用域鏈與執(zhí)行上下文的關(guān)系。2010-10-10移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試神器Eruda的介紹與使用技巧
在日常的移動(dòng)端開(kāi)發(fā)時(shí),一般都是試用chrome瀏覽器的移動(dòng)端模式進(jìn)行開(kāi)發(fā)和調(diào)試,只有在chrome調(diào)試完成,而最近發(fā)現(xiàn)了一個(gè)新的調(diào)試方法,所以這篇文章主要給大家介紹了關(guān)于移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試神器Eruda的基本資料,以及其使用的一些技巧,需要的朋友可以參考下。2017-10-10bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法
bootstrap-treeview 是一款基于Jquery+bootstrap的樹(shù)控件,這篇文章主要介紹了bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法,需要的朋友可以參考下2017-11-11JavaScript判斷瀏覽器對(duì)CSS3屬性是否支持的多種方法
其實(shí)在使用css3的一些屬性時(shí),為了兼顧低端瀏覽器對(duì)CSS3的不友好性,往往需要知道某些瀏覽器是否支持要使用的CSS3屬性,以此來(lái)做向下適配。比如常見(jiàn)的CSS3動(dòng)畫(huà)就很有必要檢測(cè)瀏覽器是否支持。下面本文就分享了幾種方法,有需要的朋友們可以參考借鑒。2016-11-11javascript function(函數(shù)類(lèi)型)使用與注意事項(xiàng)小結(jié)
這篇文章主要介紹了javascript function(函數(shù)類(lèi)型)使用與注意事項(xiàng),結(jié)合實(shí)例形式較為詳細(xì)的分析了Function(函數(shù))類(lèi)型的基本聲明、屬性、方法相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2019-06-06