如何使用angularjs創建一個「Go to top」

-4

我想用angualrjs創建一個「Back to top」按鈕。如何使用angularjs創建一個「Go to top」

1）按鈕應poisition: fixed; bottom: 0px時頁腳是不可見的

2）當頁腳變得可見，「返回頂部」應該只是坐在頁腳的頂部

我試圖創建一個，但我我有一些麻煩。

1）當頁面上的內容較少時，按鈕與頁腳重疊的位置是固定的。

2）有時在從服務器獲取數據時，如果頁面使用ng-epeat填充，那麼按鈕的位置是絕對的，我將不得不滾動以調整其位置。（我猜這發生了因爲，因爲一秒鐘的小部分是可見的，所以位置變得絕對）

理想情況下，我想計算頁面加載後按鈕的位置。我該怎麼做。

這裏是plunker http://plnkr.co/edit/IwViMJRnK2aqi8PNqT6n?p=preview

來源

2015-08-31 saga

你可以像爲：

CSS：

.goToTop 
    { 
     position: fixed; 
     width: 100px; 
     height: 40px; 
     bottom: 0; 
     right: 0; 
     z-index: 100000; 
     cursor: pointer; 
     margin: 10px; 
     -moz-opacity: 0.60; 
     opacity: .60; 
     filter: alpha(opacity=60); 
    }

HTML：

<input type="button" class="goToTop" value="Scroll Top" style="display:none;background-color:red" />

個JS：當您滾動超過100px從top ..你可以根據自己的需求改變它

$(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.goToTop').fadeIn(); 
     } else { 
      $('.goToTop').fadeOut(); 
     } 
    }); 
    $('.goToTop').click(function() { 
     $("html, body").animate({ scrollTop: 0 }, 1000); 
     return false; 
    });

Scroll top按鈕就會出現。

FIDDLE DEMO

來源

2015-08-31 08:51:02 Pawan

繼續爬完的回答，在AngularJS，你會做這樣的範圍功能的NG-點擊：

$scope.backToTop = function() { 
    $("html, body").animate({ scrollTop: 0 }, 1000); 
}

來源

2016-08-22 06:29:27 5a68656e4e6975

如何使用angularjs創建一個「Go to top」

回答

相關問題