前幾日有朋友給我們留下了一個問題，今日我們就針對這個問題做一個解答，希望能幫助這位朋友，也幫助所有有同樣疑問的朋友。

根據(jù)這個問題，我們一步一步來看應(yīng)該怎么做。

1、窗口需要可以進行滾動

2、“回到頂部”按鈕首先不顯示

3、窗口滾動到某個位置，顯示“回到頂部”按鈕

4、窗口未滾動到某個位置。隱藏“回到頂部”按鈕

?

1、創(chuàng)建頁面元素

首先需要有一個高度較高的頁面。頁面不是我們重點要講的內(nèi)容，所以我們用簡單的部件進行替代，請大家諒解。

創(chuàng)建“回到頂部”按鈕。

對于這個按鈕，我們還需要做一點設(shè)置。根據(jù)我們的實際需要，在頁面滾動的時候，需要將“回到頂部”按鈕保持在相對固定的位置。

要做到這個固定的話，大家很容易想到動態(tài)面板的固定到瀏覽器。所以我們需要先將按鈕轉(zhuǎn)變?yōu)閯討B(tài)面板。

選擇“回到頂部”按鈕，單擊鼠標(biāo)右鍵，選擇“轉(zhuǎn)換為動態(tài)面板”

?

選擇這個動態(tài)面板，命名為“返回頂部”。選擇“固定到瀏覽器”。

?

打開設(shè)置面板之后，勾選固定到瀏覽器窗口。

?

2、交互設(shè)置

?

1、隱藏“回到頂部”按鈕

這個按鈕默認(rèn)是不顯示的，只有在滿足某種條件之后才能顯示，所以首先需要將按鈕設(shè)置為隱藏。

這里我們在原有動態(tài)面板的基礎(chǔ)上新建一個空白的狀態(tài)。并且將動態(tài)面板的大小進行調(diào)整。保證動態(tài)面板能有一定的大小。

?

2、確定窗口滾動到的臨界位置。

這個位置，我們可以使用熱區(qū)部件來確定。窗口頁面是整體向上滾動的，在滾動的過程中，這個臨界位置會與“回到頂部”按鈕有所接觸。所以我們可以在“回到頂部”按鈕下方放置熱區(qū)部件。

?

將熱區(qū)部件的高度進行調(diào)整，調(diào)整到盡量高。為什么這么設(shè)置呢？原因我們接下來設(shè)置就清楚了。

?

3、設(shè)置滾動事件。

雙擊頁面事件的窗口滾動事件，打開用例編輯器。點擊“編輯條件”按鈕，打開條件編輯器。

點擊“新建”，打開第一個選擇框的菜單，可以看到有一個條件是“部件范圍”。部件范圍的條件是兩個部件是否互相接觸。

前面的兩個步驟的設(shè)置，最主要的目的是能夠保證窗口頁面在滾動的時候，始終有兩個部件保持接觸，也就是“返回頂部”按鈕和定位的熱區(qū)。所以條件設(shè)置，互相接觸的就是這兩個部件。

在兩個部件互相接觸的時候，切換“返回頂部”的動態(tài)面板到非空白的狀態(tài)，顯示出按鈕。兩個部件未接觸的時候，隱藏按鈕，也就是切換“返回頂部”的動態(tài)面板到空白的狀態(tài)。

?

這樣就設(shè)置好了，我們來看看結(jié)果如何。

這樣我們實現(xiàn)了想要的效果。

當(dāng)然，這是我們解決這個問題的其中一個方法。這里給大家再提供一個思路，還可以利用函數(shù)，來解決這個問題。