JQuery的右側垂直錨點導航

2021-07-03 04:11:58 字數 1433 閱讀 6987

1.想法

首先我看到了介面效果很好**

用演示帳號demo  demo登入後

看到的導航是下圖,效果不錯。

2.理論

現在開始介紹下jquery錨點導航的理論

比如:波輪洗衣機介紹

但是上種方法使用了乙個空標籤,而且有時候會出現錨點失效。所以建議採用id來繫結錨點,**如下:

波輪洗衣機介紹

關於#在頁面的製作中,」#」的符號很常見,並且具有通用性。基本上,其表示的含義是id選擇符。例如:css中#header{}就表示id為header的標籤的樣式如何;在jquery中,$(「#header」)表示選擇id為header的標籤為jquery物件;同樣的,在頁面的url中,」#」也可以理解為id選擇符之意,也就是頁面跳轉到含url指向的id的標籤處。

例如輸入乙個位址 

這個位址中末尾有個」#」,這個就相當於告訴瀏覽器要跳轉了,#後面跟著的3表示會在 的頁面中尋找符合」#3」特點的標籤,並且執行跳轉。

關於空錨點指向

如果url中的」#」後面跟隨的字元id在文中找不到,就會有兩種情況:如果是在當前頁面,除了url位址變化了,其它的不會改變,頁面不會有跳轉;如果是從其它頁面跳轉過來,則頁面會在頂部顯示,」#」基本就是聾子的耳朵——擺設。

對於錨點的平滑跳轉,在一般的商業性質的**上,權衡來說,要謹慎使用。

例如:讓頁面平滑滾動到乙個id為box的元素處,則jquery**只要一句話,如下:

$(「html,body」).animate(,1000)

其中animate為jquery的自定義動畫方法,$(「#box」).offset().top表示id為box的jquery物件距離頁面頂部的偏移值,1000表示平滑動畫執行的時間為1000毫秒,也就是1秒。

關於錨點重新整理失效

錨點重新整理失效就是指當按下重新整理鍵f5時,即使此時url的後面就隨錨點,此錨點也是不起作用的。

在jquery中,不難實現。可以根據url獲取錨點,從而進一步獲得對應錨點物件,然後再讓頁面的滾動高度為其距離頁面頂部的偏移值就可以了。使得頁面無論是重新載入還是其重新整理,其後面的錨點都起作用。

其js**如下:

$(function()

});

3.例項

下面的例子是垂直導航,右側導航懸浮固定效果一樣,但是是個demo,沒美工和前端設計,醜。

來個關鍵js**片段

vue頁面錨點右側導航

template的html 開通vip methods tranmem 其中的 this.getlocal 在這篇部落格 實現錨點定位 vip position45vh 相當於頁面高度的45 vh頁面寬度的百分比 vw頁面寬度的百分比。設定字型在div中水平垂直居中,text align cente...

jquery 錨點跳轉

比如 波輪洗衣機介紹 但是上種方法使用了乙個空標籤,而且有時候會出現錨點失效。所以建議採用id來繫結錨點,如下 波輪洗衣機介紹 關於 在頁面的製作中,的符號很常見,並且具有通用性。基本上,其表示的含義是id選擇符。例如 css中 header 就表示id為header的標籤的樣式如何 在jquery...

jquery 錨點跳轉 滾動導航選單和返回頂部

案件協作 更多 專題熱議 更多 精品課程 更多 經偵e課 更多 ppt模板 更多 更多 使用者貨幣排行 更多 錨點滾動 導航選單 document ready function else 給相應的樓層設定cur,取消其他樓層的cur var curlink menu.find cur if curi...