滾動到某種程度時如何顯示內容

只有在某種程度上滾動時，才會顯示“返回TOP”按鈕

如果在首次顯示網頁時將頁面滾動到某種程度時滾動到某種程度，您將看到固定按鈕，例如窗口右下角的“返回頂部”...不是嗎？對于需要經常瀏覽頂部的頁面，例如垂直長頁面(例如頁面頂部的目錄)，可以方便地將快速返回按鈕設置為頂部。因此，這次我們將解釋如何根據用戶的滾動量動態顯示“返回TOP”按鈕。它不僅限于可以這種方式顯示的“返回頂部”等按鈕。例如，您可以顯示您喜歡的任何內容，例如“相關信息列表”框。

使用jQuery很容易掌握滾動量并做一些事情

所需信息和處理

根據滾動量顯示按鈕需要以下兩種方法。

一種獲取“從當前顯示的位置從頁面頂部滾動了多少像素？”的信息的方法。“僅在條件滿足時顯示指定框”的方法在這兩種情況下，使用“jQuery”這是一個著名的JavaScript庫，可以很容易地用簡短的描述來實現。盡管稍后將描述詳細描述方法，例如，

$(window)。scrollTop();

您可以獲得有關“從頁面頂部滾動了多少像素的信息？通過利用它，可以很容易地創建諸如“按指定像素滾動時顯示指定框”的腳本。如果您可以使用這種“滾動量的查看器”方法，則腳本的應用范圍會擴展并且非常有用。

滾動到某種程度時顯示“返回TOP”按鈕的示例

滾動到一定程度時，會顯示“返回TOP”按鈕

我們在本文中提供了示例頁面，因此請嘗試訪問瀏覽器中的以下鏈接。→ 例子，以顯示“回到TOP”按鈕取決于滾動的量時，在上述頁中的向下方向滾動超過350像素，它是在頁面的右下角半透明鍵“▲返回TOP”所示在右邊的圖中它會出現。相反，當您在350px內返回時，按鈕會消失。請操作瀏覽器的滾動條并嘗試顯示/隱藏按鈕。這一次，我將解釋如何制作這樣的頁面。讓我們來看看如何

達到指定的滾動量時，如何顯示“返回TOP”按鈕

要在達到指定的滾動量時顯示“返回TOP”按鈕，大致需要以下三個描述。0 JQuery的讀主體1 “回到TOP”被固定到屏幕按鈕的右下角使HTML和CSS和2 來確定滾動量，寫一個腳本用于切換按鈕的顯示和非顯示順序在以下我會向你解釋一下。

0.加載jQuery正文

由于我們在這里使用jQuery，我們需要先加載jQuery主體。例如，如果您在HTML中編寫以下行，則可以從jQuery分發站點提供的CDN服務器中讀取jQuery主體。如果您不太了解，請在此期間在HTML中寫下以下一行。

如果您的Web服務器上已經有jQuery主體，即使您編寫它以便您閱讀它也沒有問題。

1.將其固定在屏幕的右下方。使用HTML和CSS創建“返回TOP”按鈕

制作一個固定顯示在右下方的按鈕

首先，按照右圖所示進行“返回TOP”按鈕，該按鈕固定顯示在屏幕的右下方(無論多少都要滾動)。它分為HTML(+ JavaScript)源代碼，它提供返回頁面頂部的函數和CSS源代碼，將其顯示為按鈕，并按順序將其固定在屏幕的右下角。

■ 用于創建按鈕的HTML源(僅限HTML版本)：HTML使用p元素和元素作為簡單鏈接，如下所示。

▲返回TOP p>

要從腳本中使用它，會附加一個id名稱。如果您想在上面的“topbutton”之外設置id名稱，請同時修改后續來源中“topbutton”的描述。■ 用于創建按鈕的HTML源代碼(+ JavaScript版本)：在上面的描述中，需要在頁面頂部添加id名稱為“top”的一些元素。然而，想法寫如下所述添加到onclick屬性的腳本，即使他們不準備任何頁面的頂部，頁面的頂部(動畫慢慢滾動)移動我會的。我也在上一頁介紹的示例頁面中使用了此描述。

■ CSS源顯示按鈕：通過添加下面的樣式表到在上面創建的元件，并且以這樣的方式即“屏幕固定在右下角顯示” - “按鈕Ppoku裝修”，“第一非顯示狀態”。 。每行的含義都是以下面的來源中的注釋形式寫的，所以請參考它。

如果按原樣復制并粘貼上面的CSS源代碼，它將顯示為示例頁面。請更正主要以粗體顯示的部分并進行調整，使其成為您選擇的著色/顯示位置。

無論您滾動多少，它都將固定顯示在窗口中的相同位置(右下角)

如果您嘗試在瀏覽器中顯示上述源，則不會顯示該按鈕。因為被“display：none”的指定隱藏了所以。因為要“只有當條件滿足時顯示”，請使用腳本后，它是不是在初始狀態可見。如果僅排除描述(顯示屬性)并檢查顯示，則它看起來如右圖所示。即使您滾動頁面，按鈕的顯示位置也不會改變，它固定在屏幕的右下方。

2.確定滾動量并編寫一個切換按鈕顯示/不顯示的腳本

接下來，讓我們編寫一個腳本。要描述的腳本如下。雖然稍后將描述細節，但是在以粗體(第6行)寫的“350”部分中指定“滾動目的量”。單位是像素(px)。請指定所需的數量并使用它。除此之外，復制和粘貼都沒有問題。

$(function(){ //滾動時執行 $(window).roll(function(){ //設置所需的滾動量(px) var TargetPos =350 ; //獲取當前滾動位置 var ScrollPos = $(window)。scrollTop(); //確定當前位置是否已達到目標滾動量 if(ScrollPos> = TargetPos){ //顯示是否到達 $(“＃topbutton”)。fadeIn(); } 其他{ //如果沒有達到隱藏 $(“＃topbutton”)。fadeOut(); } }); });

我將簡要解釋每行的上述描述的內容。■ 滾動時執行一些處理(第4到18行)：如果要根據瀏覽器滾動的時間執行某些操作，請使用jQuery編寫如下。

$(window).roll(function(){ //描述你想在這里執行的內容});

■ ：為了獲取當前的滾動位置(8號線)(從頁面頂部到您目前能夠看到的位置的距離)，這是在開始一點點的介紹，得到了“當前滾動位置”是，jQuery的我們將如下編寫。

var ScrollPos = $(window)。scrollTop();

這里，當前滾動位置存儲在變量“ScrollPos”中。此外，單獨的“目標滾動量”存儲在變量“TargetPos”(第6行)中，并比較這兩個變量(TargetPos和ScrollPos)的值(第10行)可以確定它是否超過所需的滾動位置。■ 顯示帶有“淡入”動畫的按鈕(第12行)：創建按鈕使用id屬性(如“id =”topbutton“” )將id元素分配給p元素。要使用“淡入”動畫顯示此元素，請使用jQuery并按如下方式編寫它。

$(“ ＃topbutton”)。fadeIn() ;

當它消失時，它會與“淡入”動畫效果一起顯示，如果已經顯示，它什么都不做。■ 使用“淡出”動畫隱藏按鈕(第16行)：同樣，要使用“淡出”動畫進行擦除，請使用jQuery進行如下編寫。

$(“ ＃topbutton”)。fadeOut() ;

它在顯示時會隨著“淡出”動畫效果消失，如果已經消失則不會做任何事情。

完成

滾動到一定程度時，會顯示“返回TOP”按鈕

正如您所看到的，使用jQuery可以非常輕松地“向下滾動并在顯示和隱藏按鈕之間切換”腳本。使用目前為止引入的所有源創建的示例頁面如下所示。→ 根據滾動“回到TOP”。例如，顯示按鈕的數量中的示例頁面的HTML源代碼，我已經加入到評論的形式，各位置的含義，請結合本文的討論閱讀。

滾動到一定程度后如何顯示“返回TOP”按鈕

這一次，我們介紹了一種根據用戶的滾動量顯示“返回TOP”按鈕的方法。您可以看到，您可以使用jQuery輕松縮短滾動位置和切換顯示/不顯示的過程。在此示例中，我們發布了“返回TOP”按鈕，但您可以將其用于各種目的，例如在其他位置發布相關信息列表。

舉報/反饋

總結

以上是生活随笔為你收集整理的html返回滚动按钮,如何通过滚动显示按钮返回TOP的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。