JQuery 實現(xiàn)在同一頁面錨點鏈接之間的平滑滾動
web開發(fā)前端一直用JQuery ,真正接觸了才體會到,JQuery 原來比我想象的要強大的多,也可能比我體會到的還要強大的多,特別是兼容性那個好,于是把一些好玩的,酷炫的,可以代替 JS 的,統(tǒng)統(tǒng)給用上了。
從 JQuery 引入今天的正題,用 JQuery 實現(xiàn)錨點鏈接之間的平滑滾動。以前介紹過一個用 JS 實現(xiàn)的頁面錨點跳轉(zhuǎn)緩沖特效,效果相當(dāng)不錯,可以在同一頁面的錨點鏈接之間實現(xiàn)平滑的滾動,但是 JS 代碼相對來說比較冗長,現(xiàn)在好了,只要已經(jīng)加載了 JQuery,我們就可以用較為簡短的代碼實現(xiàn)相同的效果。
使用方法如下:
1、載入 JQuery 庫;
2、關(guān)鍵代碼:
$(document).ready(function() { $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop: targetOffset }, 1000); return false; } } }); });
還是再要強調(diào)一下加載的順序,先引用JQuery 類庫。順便說一下,經(jīng)測試,該滾動效果在各瀏覽器下都兼容適用,唯有在 Opera 下表現(xiàn)有點怪異,還有待改進。
- jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jquery實現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼
- jQuery實現(xiàn)滑動頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
- JQuery實現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點
- jQuery的Scrollify插件實現(xiàn)滑動到頁面下一節(jié)點
- jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
- 基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實現(xiàn)代碼(帶平滑移動的效果)
- jQuery實現(xiàn)彈窗下底部頁面禁止滑動效果
相關(guān)文章
Jquery Ajax學(xué)習(xí)實例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用實現(xiàn)代碼,需要的朋友可以參考下。2010-03-03使用jquery為table動態(tài)添加行的實現(xiàn)代碼
最近,有需要做一個動態(tài)的給table,添加行,用了點時間,算是做成了。已測試過,但如果發(fā)現(xiàn)有什么bug,可以留言,歡迎拍磚。大家一起進步。2011-03-03jQuery實現(xiàn)checkbox全選功能完整實例
這篇文章主要介紹了jQuery實現(xiàn)checkbox全選功能,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-07-07jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
此jQuery插件為Ajax分頁插件,一次性加載,故分頁切換時無刷新與延遲,如果數(shù)據(jù)量較大不建議用此方法,因為加載會比較慢,接下來詳細介紹使用方法,感興趣的朋友可以了解下2013-01-01Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法
這篇文章主要給大家介紹了關(guān)于Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法,文章通過實例代碼以及圖文介紹的非常詳細,對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06jQuery中hover方法搭配css的hover選擇器,實現(xiàn)選中元素突出顯示方法
下面小編就為大家?guī)硪黄猨Query中hover方法搭配css的hover選擇器,實現(xiàn)選中元素突出顯示方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05