「網站返回頁頭」在早期最簡單的使用做法就是幫超連結加入空連結 , 例如"#" , 但這樣的返回效果是立即的, 給瀏覽網站的人感覺會比較突然 , 現在我們可以利用JQuery來製作返回網站頁頭與頁尾帶捲動動作效果的按鈕 , 目前已經非常廣泛運用在許多網站中 , 今天將做法分享出來給各位，一樣先來看一下範例頁面：
JQuery Scrolling to the Top 使用教學
先從返回頂部底部按鈕的css部分開始說起 , 基本的美化筆者不多贅述 , 只提最重要的部分 , 就是將按鈕「固定」在頁面右側 , 不會隨著頁面捲動而消失 , 這時候就要使用css語法中的 「position: fixed」它可以將指定的div固定在頁面指定位置上 , 例如設定「bottom: 70px ; right: 30px;」意指將按鈕定位在頁面右側30px處以及距離頁面底部70px處 , 其它按鈕如果要讓它們垂直堆疊的話 , 水平的位置保持一樣的設置就可以 (即都設定right: 30px) , 然後堆疊部分靠 bottom 的距離來控制 , 這樣就可以將按鈕疊在一起 !
jquery部分 , 可以參考含原文註釋的程式碼 , 主要在撰寫當卷軸捲動時 , 按鈕呈現半透明 , 停止後恢復不透明 ; 以及滑鼠點擊後返回頂部以及底部效果 , "800"是返回頂部與底部移動速度 , 數字越小捲動越快 !- $(function() {
- // the element inside of which we want to scroll
- var $elem = $('#wrapper');
-
- // show the buttons
- $('#nav_up').fadeIn('slow');
- $('#nav_down').fadeIn('slow');
-
- // whenever we scroll fade out both buttons
- $(window).bind('scrollstart', function(){
- $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
- });
- // ... and whenever we stop scrolling fade in both buttons
- $(window).bind('scrollstop', function(){
- $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
- });
-
- // clicking the "down" button will make the page scroll to the $elem's height
- $('#nav_down').click(
- function (e) {
- $('html, body').animate({scrollTop: $elem.height()}, 800);
- }
- );
- // clicking the "up" button will make the page scroll to the top of the page
- $('#nav_up').click(
- function (e) {
- $('html, body').animate({scrollTop: '0px'}, 800);
- }
- );
- });
scroll.rar
(50.3 KB, 下載次數: 56)
|
喜歡
FULLSCREEN PAGEFLIP LAYOUT 全屏式書本翻頁效果網站範例
JQuery 頁籤式動態分類圖片導覽效果 (帶響應式設計範例)
