UWP 返回頂部按鈕

返回頂部的按鈕，like this

當使用者下滑了一定的距離之後，通常是快滑倒底部的時候，出現返回頂部按鈕，當使用者向上快滑，滑到頂部的時候，返回頂部按鈕自動消失。

在uwp中，用來滾動內容的控制項是scrollviewer控制項，當前頁面呈現不下時，就會讓內容可以滾動檢視。

一：scrollviewer 控制項

1.1 viewchanged事件

當scrollviewer裡的滾動條的位置發生改變時，會觸發viewchanged事件。

1.2 獲取滾動條位置

// 獲取內容已垂直滾動的距離。

// 返回結果:
// 內容已垂直滾動的距離。
public double verticaloffset 

1.actualheight      實際高度，當前scrollviewer呈現的高度，包括scrollviewer的padding值。

2.viewportheight  獲取包含內容視區垂直大小的值，（減去padding，margin等）

3. extentheight  拓展高度，scrollview總的長度，包括還沒有滾動到的長度

4. scrollableheight 能夠滾動的高度，extentheight-actualheight  就是能夠滾動的高度

5.height 高度

6.maxheight 最大高度

7. minheight 最小高度

要注意 verticaloffset 滾動條的值滑倒底部=scrollableheight  而不是extentheight

具體的放回頂部按鈕出現的規則自己定。

scrollviewer scrollviewer = sender as scrollviewer;

if (scrollviewer.verticaloffset>scrollviewer.viewportheight) //
else if(scrollviewer.verticaloffset< scrollviewer.viewportheight) //

public

bool changeview(double? horizontaloffset, double? verticaloffset, float? zoomfactor);

//返回頂部按鈕

private void backtopbutton_click(object sender, routedeventargs e)

---------some words-----------

1.scroll 滾動

2.viewer 閱讀器

3. scrollviewer 滾動閱讀器

4.offset 偏移

5.vertical 豎直的

6.verticaloffset 豎直偏移量

7.actual 實際的

8.viewport 視口

9.extent 拓展

10.zoom 變焦，變大

11.factor 因素，因子

----------- the end---------------

ionic返回頂部

1 引入content模組 import from ionic angular 2 例項化 viewchild content content content 括號內是頁面內容哪乙個部分，第二個content為名字，第三個為例項化的模組 3 用法 this.content.scrollto 0,0,...

返回頂部 js

返回頂部 1.可以在網頁新增錨鏈結 2.利用js 可以實現動畫效果 test test test test test test test test test test test test test test test test test test test test test test test t...

返回頂部 demo

由於原理相當簡單，也沒必要詳細說明，主要是當滾動條拉下時，出現 返回頂部 按鈕，點選就會迅速把頁面往上滾。其中最難搞的卻是樣式的設定，由於ie6以下版本不支援position fixed，必須通過ie才支援的css expression進行絕對定位來模仿固定定位。跨瀏覽器的固定定位樣式,其中 符號只...