JQuery 實(shí)現(xiàn)在同一頁面錨點(diǎn)鏈接之間的平滑滾動(dòng)
web開發(fā)前端一直用JQuery ,真正接觸了才體會(huì)到,JQuery 原來比我想象的要強(qiáng)大的多,也可能比我體會(huì)到的還要強(qiáng)大的多,特別是兼容性那個(gè)好,于是把一些好玩的,酷炫的,可以代替 JS 的,統(tǒng)統(tǒng)給用上了。
從 JQuery 引入今天的正題,用 JQuery 實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)。以前介紹過一個(gè)用 JS 實(shí)現(xiàn)的頁面錨點(diǎn)跳轉(zhuǎn)緩沖特效,效果相當(dāng)不錯(cuò),可以在同一頁面的錨點(diǎn)鏈接之間實(shí)現(xiàn)平滑的滾動(dòng),但是 JS 代碼相對來說比較冗長,現(xiàn)在好了,只要已經(jīng)加載了 JQuery,我們就可以用較為簡短的代碼實(shí)現(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;
}
}
});
});
還是再要強(qiáng)調(diào)一下加載的順序,先引用JQuery 類庫。順便說一下,經(jīng)測試,該滾動(dòng)效果在各瀏覽器下都兼容適用,唯有在 Opera 下表現(xiàn)有點(diǎn)怪異,還有待改進(jìn)。
- jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動(dòng)效果代碼
- jQuery實(shí)現(xiàn)滑動(dòng)頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
- JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動(dòng)到頁面節(jié)點(diǎn)
- jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁面下一節(jié)點(diǎn)
- jQuery創(chuàng)建平滑的頁面滾動(dòng)(頂部或底部)
- 基于jquery的從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面的指定位置的實(shí)現(xiàn)代碼(帶平滑移動(dòng)的效果)
- jQuery實(shí)現(xiàn)彈窗下底部頁面禁止滑動(dòng)效果
相關(guān)文章
jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲完整實(shí)例【附源碼下載】
這篇文章主要介紹了jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合vue.js針對圖片的相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
這篇文章主要介紹了基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證 的相關(guān)資料,需要的朋友可以參考下2015-12-12
Jquery使用JQgrid組件處理json數(shù)據(jù)
這篇文章介紹了Jquery使用JQgrid組件處理json數(shù)據(jù)的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo
這篇文章給大家介紹使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo的實(shí)現(xiàn)思路,涉及到Jquery.Qrcode基本使用,Jquery.Qrcode對中文字符的支持及Jquery.Qrcode添加自定義Logo圖片的相關(guān)知識(shí),本文介紹非常詳細(xì),具有參考價(jià)值,感興趣的朋友一起看看吧2016-09-09
jquery獲取當(dāng)前元素索引值用法實(shí)例
這篇文章主要介紹了jquery獲取當(dāng)前元素索引值用法,實(shí)例分析了jQuery獲取當(dāng)前元素索引在創(chuàng)建圖片輪播效果中的使用技巧,需要的朋友可以參考下2015-06-06
JQUERY 設(shè)置SELECT選中項(xiàng)代碼
本篇文章主要是對JQUERY 設(shè)置SELECT選中項(xiàng)的代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02
Jquery動(dòng)態(tài)替換div內(nèi)容及動(dòng)態(tài)展示的方法
這篇文章主要介紹了Jquery動(dòng)態(tài)替換div內(nèi)容及動(dòng)態(tài)展示的方法,動(dòng)態(tài)替換div內(nèi)容并展示的使用技巧與注意事項(xiàng),需要的朋友可以參考下2015-01-01

