快捷導(dǎo)航

jQuery實現(xiàn)平滑滾動到指定錨點的方法

更新時間：2015年03月20日 11:23:32 作者：令狐不聰

這篇文章主要介紹了jQuery實現(xiàn)平滑滾動到指定錨點的方法,實例分析了jQuery根據(jù)錨點定位滾動的技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)平滑滾動到指定錨點的方法。分享給大家供大家參考。具體如下：

定義好指定的anchor錨點，調(diào)用下面的js代碼可以讓頁面平滑的滾動到指定的位置，非常實用，比如返回頁面頂部，去往頁面底部等功能

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(function() {
  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });
});

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery中:empty選擇器用法實例
這篇文章主要介紹了jQuery中:empty選擇器用法,實例分析了:empty選擇器的功能、定義及匹配空元素的用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery中[attribute^=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開始的元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery toggle()設(shè)置CSS樣式
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
2009-11-11
基于Jquery+Ajax+Json實現(xiàn)分頁顯示附效果圖
后臺action產(chǎn)生json數(shù)據(jù)，js獲取json數(shù)據(jù)分頁顯示，詳細的示例代碼如下，需要的朋友可以學(xué)習(xí)下
2014-07-07
基于PHP和Mysql相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動態(tài)讀取和加載外部數(shù)據(jù)，本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示，以及可以通過輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過程
2015-12-12
jQuery 獲取對象根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
jQuery 練習(xí) 獲取對象(3) - 根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
2010-05-05
jQuery修改DOM結(jié)構(gòu)_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了jQuery修改DOM結(jié)構(gòu)的相關(guān)知識，需要的的朋友參考下吧
2017-07-07
從零開始學(xué)習(xí)jQuery (二) 萬能的選擇器
本章講解jQuery最重要的選擇器部分的知識. 有了jQuery的選擇器我們幾乎可以獲取頁面上任意的一個或一組對象, 可以明顯減輕開發(fā)人員的工作量.
2010-10-10
jquery自定義插件——window的實現(xiàn)【示例代碼】
下面小編就為大家?guī)硪黄猨query自定義插件——window的實現(xiàn)【示例代碼】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
2016-05-05
jQuery之a(chǎn)jax刪除詳解
ajax是局部刷新。用jQuery來實現(xiàn)，會簡化很多。下面進行詳細的說明，結(jié)合一個ajax刪除的案例來進行
2014-02-02