5種回到頂部的寫法從實現到增強

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/09/03/5836179.html
-Advertisement-
Play Games

× 目錄 [1]寫法 [2]增強 [3]實現 前面的話 本文先詳細介紹回到頂部的5種寫法，然後對其實現功能增加，最後得到最終實現 寫法 【1】錨點 使用錨點鏈接是一種簡單的返回頂部的功能實現。該實現主要在頁面頂部放置一個指定名稱的錨點鏈接，然後在頁面下方放置一個返回到該錨點的鏈接，用戶點擊該鏈接即可 ...


×
目錄
[1]寫法 [2]增強 [3]實現

前面的話

　　本文先詳細介紹回到頂部的5種寫法，然後對其實現功能增加，最後得到最終實現

 

寫法

【1】錨點

　　使用錨點鏈接是一種簡單的返回頂部的功能實現。該實現主要在頁面頂部放置一個指定名稱的錨點鏈接，然後在頁面下方放置一個返回到該錨點的鏈接，用戶點擊該鏈接即可返回到該錨點所在的頂部位置

　　[註意]關於錨點的詳細信息移步至此

<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到頂部</a>
</body>

【2】scrollTop

　　scrollTop屬性表示被隱藏在內容區域上方的像素數。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大於0，且表示元素上方不可見內容的像素寬度

　　由於scrollTop是可寫的，可以利用scrollTop來實現回到頂部的功能

　　[註意]關於頁面的scrollTop的相容問題詳細內容移步至此

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
    <script>
        test.onclick = function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    </script>
</body>

【3】scrollTo()

　　scrollTo(x,y)方法滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位於顯示區域的左上角

　　設置scrollTo(0,0)可以實現回到頂部的效果

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
    <script>
        test.onclick = function(){
            scrollTo(0,0);
        }
    </script>
</body>

【4】scrollBy()

　　scrollBy(x,y)方法滾動當前window中顯示的文檔，x和y指定滾動的相對量

　　只要把當前頁面的滾動長度作為參數，逆向滾動，則可以實現回到頂部的效果

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
    <script>
        test.onclick = function(){
            var top = document.body.scrollTop || document.documentElement.scrollTop
            scrollBy(0,-top);
        }
    </script>
</body>

【5】scrollIntoView()

　　Element.scrollIntoView方法滾動當前元素，進入瀏覽器的可見區域　

　　該方法可以接受一個布爾值作為參數。如果為true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）；如果為false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）。如果沒有提供該參數，預設為true

　　使用該方法的原理與使用錨點的原理類似，在頁面最上方設置目標元素，當頁面滾動時，目標元素被滾動到頁面區域以外，點擊回到頂部按鈕，使目標元素重新回到原來位置，則達到預期效果

<body style="height:2000px;">
    <div id="target"></div>
    <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
    <script>
        test.onclick = function(){
            target.scrollIntoView();
        }
    </script>
</body>

增強

　　下麵對回到頂部的功能進行增強

【1】顯示增強

　　使用CSS畫圖，將“回到頂部”變成可視化的圖形(如果相容IE8-瀏覽器，則用圖片代替)

　　使用CSS偽元素及偽類hover效果，當滑鼠移動到該元素上時，顯示回到頂部的文字，移出時不顯示　　

<style>
.box{
    position:fixed;
    right:10px;
    bottom: 10px;
    height:30px;
    width: 50px;    
    text-align:center;
    padding-top:20px;    
    background-color: lightblue;
    border-radius: 20%;
    overflow: hidden;
}
.box:hover:before{
    top:50%
}
.box:hover .box-in{
    visibility: hidden;
}
.box:before{
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%,-50%);
    content:'回到頂部';
    width: 40px;
    color:peru;
    font-weight:bold;

}    
.box-in{
    visibility: visible;
    display:inline-block;
    height:20px;
    width: 20px;
    border: 3px solid black;
    border-color: white transparent transparent white;
    transform:rotate(45deg);
}
</style>

<body style="height:2000px;">
<div id="box" class="box">
    <div class="box-in"></div>
</div>    
</body>

【2】動畫增強

　　為回到頂部增加動畫效果，滾動條以一定的速度回滾到頂部

　　動畫有兩種：一種是CSS動畫，需要有樣式變化配合transition；一種是javascript動畫，使用定時器來實現　　

　　在上面的5種實現中，scrollTop、scrollTo()和scrollBy()方法可以增加動畫，且由於無樣式變化，只能增加javascript動畫

　　定時器又有setInterval、setTimeout和requestAnimationFrame這三種可以使用，下麵使用性能最好的定時器requestAnimationFrame來實現

　　[註意]IE9-瀏覽器不支持該方法，可以使用setTimeout來相容

　　1、增加scrollTop的動畫效果

　　使用定時器，將scrollTop的值每次減少50，直到減少到0，則動畫完畢

<script>
var timer  = null;
box.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

　　2、增加scrollTo()動畫效果

　　將scrollTo(x,y)中的y參數通過scrollTop值獲取，每次減少50，直到減少到0，則動畫完畢

<script>
var timer  = null;
box.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            scrollTo(0,oTop-50);
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

　　3、增加scrollBy()動畫效果

　　將scrollBy(x,y)中的y參數設置為-50，直到scrollTop為0，則回滾停止

<script>
var timer  = null;
box.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            scrollBy(0,-50);
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

 

實現

　　由於scrollTop、scrollBy()和scrollTo()方法，都以scrollTop值是否減少為0作為動畫停止的參照，且三個動畫的原理和實現都基本相似，性能也相似。最終，以最常用的scrollTop屬性實現動畫增強效果

　　當然，如果覺得50的速度不合適，可以根據實際情況進行調整

<style>
.box{
    position:fixed;
    right:10px;
    bottom: 10px;
    height:30px;
    width: 50px;    
    text-align:center;
    padding-top:20px;    
    background-color: lightblue;
    border-radius: 20%;
    overflow: hidden;
}
.box:hover:before{
    top:50%
}
.box:hover .box-in{
    visibility: hidden;
}
.box:before{
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%,-50%);
    content:'回到頂部';
    width: 40px;
    color:peru;
    font-weight:bold;

}    
.box-in{
    visibility: visible;
    display:inline-block;
    height:20px;
    width: 20px;
    border: 3px solid black;
    border-color: white transparent transparent white;
    transform:rotate(45deg);
}
</style>

<body style="height:2000px;">
<div id="box" class="box">
    <div class="box-in"></div>
</div>    
</body>

<script>
var timer  = null;
box.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

　　歡迎交流


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • spiral matrix
    如圖，生成如此旋轉的矩陣 輸入行N，列M，求上述矩陣 假定 縱向為x軸，橫向為y軸，從1開始 層數 k=min（i,j,N+1-i,M+1-j） k層矩陣的長 l=N-(k-1)*2 寬 w=M-(k-1)*2 矩陣左上角的坐標值為（k,k）,根據外層矩陣的長寬可以算出數值，進而確定當前矩陣（i,j ...
  • Struts 2 數據校驗要用到的類和兩種校驗方式以及一些校驗問題的解決
    通過繼承ActionSupport類來完成Action開發，ActionSupport類不僅對Action介面進行簡單實現， 同時增加了驗證、本地化等支持 。真實開發中自定義Action都需要繼承該類。對用戶登錄添加表單驗證功能 ActionSupport類的作用： struts2不要求我們自己設計 ...
  • C++ 簡單的任務隊列
    任務隊列是指能夠實現任務在多線程間安全傳遞的先入先出的隊列。 任務是指組合了數據和操作的對象，這裡面定義為CTask類的對象。 任務的實現： Task.cpp 1 #include "stdafx.h" 2 #include "Task.h" 3 #include <iostream> 4 usin ...
  • PHP加密技術
    一、MD5加密 直接乾，這裡以一個登錄頁面為例： 主要就是記得比對的時候也使用MD5，所以存在資料庫中的時候就是密碼保存的了 二、Crypt加密演算法 同樣是一個單向加密演算法，無法由密文直接得到明文密碼（和MD5一樣）； 語法：string crypt(string $str[,string $sal ...
  • 論普通程式員與架構師
    為何一說程式員就是吃青春飯，各行各業按理不應該是呆的越久懂得經驗越多嗎？ 為何時間帶來的不是成就感，而是恐慌感，還有轉型的困惑？ 那幾年的項目經驗到底為程式員提供了什麼？ 為何程式員開發項目幾年之後仍然成為不了架構師，僅僅是項目少的問題嗎？ 從項目經驗到底得到了什麼？ 有一種程式員一直做底層開發，以 ...
  • Lind.DDD.Utils.HttpHelper里靜態對象引出的Http超時問題
    回到目錄 Lind.DDD.Utils.HttpHelper組件主要實現了對HTTP的各種操作，如Get,Post,Put和Delete，它屬於最純粹的操作，大叔把它封裝的目的主要為了實現與ＡＰＩ安全授權的統一，你不可能為每個請求都寫一個“邏輯完全一樣的加密規則”，這是違背DRY原則的，我們應該通過 ...
  • asp.net網站基礎架構－1.優雅的處理異常
    最近幾年在做項目過程中發現項目中出現的問題，一部分由於項目前期一些很基礎的技術系統沒有註意, 所以總結了項目開始搭建架構的時候應該註意的技術問題和技術框架的選型。 所有所謂的最佳實踐只是參考，本文也不例外。 異常處理是程式最基本的問題,我見過最多的處理異常的方式，在業務層一個大的try catch） ...
  • css3製作各類圖形（一）
    如何使用CSS來製作圖形，比如說圓形，半圓形，三角形等。今天我特意在網上查閱了一下，介紹這樣的教程還是蠻多的，因此我也決定整理一份相關教程出來與大家一起分享。 很少會有人意識到，當瀏覽器繪製的border，會有一個角度的問題。我們就是得用這樣的一個技巧來製作三角的效果。我們只需要保證一邊的邊框是有... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類