CSS3 Animations創建返回頂部的平滑動畫

返回頂部在css3未出來前我們都是使用jquery或原生的js來實現返回頂部了,現在有了css3我們可以輕松的實現返回頂部了,具體給各位介紹一下.

一般在一個長的網頁中,我們都會有一個按鈕,讓用戶能夠快速的定位到網頁的不同地方,一般都是一個返回頂部的按鈕,這個功能我們都是使用的jQuery來完成,但是今天,我們爲大家講解一下不使用jQuery而是使用CSS3的動畫,創建返回頂部的平滑動畫效果。

返回頂部的動畫效果,能夠讓我們快速的導航到菜單欄,通常,我們使用jQuery代碼是這麽編寫代碼的

$( 'body, html' ).animate({ scrollTop : 0 }, 800 );

所以,如果我們設置scrollTop爲500,那麽網頁將滾動到離頂部還有500px的位置上面。

CSS3給我們帶來了很多高級的功能,比如說動畫效果,我就在想一種不依賴JavaScript的解決方法,最後我發現這是不可能實現的,因爲我們僅僅通過CSS代碼是無法訪問CSS3 Animations API。

我有點不甘心,就這樣的放棄,我決定試試通過JavaScript獲取到CSS3動畫的API,于是我找到了一個方法。

想法很簡單,首先我們需要使用jQuery API獲取到當前滾動的距離定義爲:POS,然後在我們的<body>元素中設置margin-top負的:-POS屬性,所以現在我們有了一個初步的方法,我們可以看到,當滾動距離的增加,和滾動滑條的隨機位置如下圖表示:

CSS3 Animations創建返回頂部的平滑動畫

讓我們繼續滾動到0的位置,這使微積分更精確,最後觸發滾動動畫前我們只有啓動transition在body元素中,並改變margin爲0,這讓我們一到頂部的平滑效果看整個網站的幻燈片,和滾動手柄上始終保持0的位置,並通過與寬松的功能打一點,我們可以看到一個驚人的效果,你可以看到上面的示範。

實現方法

讓我們說,我們有這個按鈕:

<div id="go-top"> Go to Top </div>

現在讓我們搬到jQuery的一部分:

// Define the variables var easing, e, pos;
$( function (){
// Get the click event
$( "#go-top" ).on( "click" , function (){
// Get the scroll pos
pos= $(window).scrollTop();
// Set the body top margin
$( "body" ).css({ "margin-top" : -pos+ "px" , "overflow-y" : "scroll"});
// This property is posed for fix the blink of the window width change
// Make the scroll handle on the position 0
$(window).scrollTop( 0 );
// Add the transition property to the body element
$( "body" ).css( "transition" , "all 1s ease" );
// Apply the scroll effects
$( "body" ).css( "margin-top" , "0" );
// Wait until the transition end $( "body" ).on( "webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd" , function (){
// Remove the transition property
$( "body" ).css( "transition" , "none" );
});
});
});

現在,如果你點擊 div#go-top 按鈕,將使用CSS3過度動畫跳轉到網頁的頂部。

如何使用easing
不得不說,在CSS中的動畫中,easing使用的太有極限性了,不夠靈活。

結論

對我來說,我覺得這個方法很好的解決方案來代替傳統的jQuery的使用它,它也將滾動手柄的高度如果你注意到

更多相關文章
  • ios開發之Swift - 點擊狀態欄使tableView返回頂部附:狀態欄點擊事件回應
    下面我們一起來看一篇關于ios開發之Swift - 點擊狀態欄使tableView返回頂部(附:狀態欄點擊事件回應)的例子,希望例子能夠幫助到各位.1,當頁面上只有一個scrollView,點擊狀態欄scrollView會自動滾動到頂部 比如頁面上只有一個表格(UITableView),當點擊頂部狀 ...
  • 返回頂部效果代碼現在網上有的是,基于上都是基于jquery的,今天發現360導航網站上返回頂部效果很不錯,下載下來與各位分享.top.js代碼 代碼如下 var IMYUAN; IMYUAN || (IMYUAN = {}); (function(a) { a.fn.extend({ returnt ...
  • 本文章來給大家介紹兩款不錯的jq和javascript實現返回頂部實現程序,各位朋友可參考參考.jquery博客現在准時下班,最近加的蠻累的,估計有加班後遺症了,擦....話說有時候,付出和你收獲的不一定成正比,糾結
  • 創建Ubuntu系統可啓動U盤
    現在做系統,最方便的方法還是要屬U盤啓動,隨身攜帶,插入電腦就可以,尤其是公司禁用下載或者光驅的情況下.最近,還是頭一次制作可啓動U盤,網上方法一搜一大堆,但是普遍比較麻煩,容易失敗.其實在Ubuntu的官網就提供了Ubuntu.Mac OS X和Windows系統下制作啓動U盤的方法,除了OS X
  • 基于jquery的返回頂部是非常的方法來實現了,我們可以利用jquery中Animate與scrollTop方法來實現回頂效果,並且還帶有滑動效果哦,下面來給各位介紹一下實現步驟.jQuery animate() 方法允許您創建自定義的動畫animate是jq的一個特效的函數方法,animate()
  • Android中ViewPage+Fragment頂部及FragmentTabHost+Fragment底部 滑動切換
    本文我們將介紹在Android開發很常見的tab滑動切換效果,本文講了兩例,一個是ViewPage+Fragment實現區域頂部tab滑動切換,還有一個是FragmentTabHost+Fragment實現底部tab切換,歡迎交流.Android開發中ViewPage+Fragment實現區域頂部t ...
  • 回到頂部我們如果百度一搜索會有N種方法,但是你看了有很多都是一樣的,下面我整理了一些基于jquery回到頂部的例子,下面給各位參考一下.最簡單的寫法--本站效果: 代碼如下 $(document).ready(function() { $('a[href=#top]').click(function ...
  • 在C#中對目錄操作我們有一個Directory類,他可以對目錄進行複制.移動.重命名.創建和刪除目錄等等操作,下面我們一起來看看.Directory 類用于典型操作,如複制.移動.重命名.創建和刪除目錄.也可將 Di
一周排行