JS實現回到頁面頂部動畫效果 2016.03.23

来源:http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522908.html
-Advertisement-
Play Games

最近在模仿各大網站寫頁面樣式和交互,發現好多都有回到頂部的需要,所以寫了一下js,記錄下來。 發現還可以添加從快到慢的動畫效果和隨時下拉滾動條停止滾動的功能, 參考了imooc上相關課程,最終實現JS代碼如下: ...


最近在模仿各大網站寫頁面樣式和交互,發現好多都有回到頂部的需要,所以寫了一下js,記錄下來。
發現還可以添加從快到慢的動畫效果和隨時下拉滾動條停止滾動的功能, 參考了imooc上相關課程,最終實現JS代碼如下:

//頁面載入後觸發
window.onload = function(){
    var btn = document.getElementById('btn');
    var timer = null;
    var isTop = true;
    //獲取頁面可視區高度
    var clientHeight = document.documentElement.clientHeight;

    
    //滾動條滾動時觸發
    window.onscroll = function() {
    //顯示回到頂部按鈕
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (osTop >= clientHeight) {
            btn.style.display = "block";
        } else {
            btn.style.display = "none";
        };
    //回到頂部過程中用戶滾動滾動條,停止定時器
        if (!isTop) {
            clearInterval(timer);
        };
        isTop = false;

    };

    btn.onclick = function() {
        //設置定時器
        timer = setInterval(function(){
            //獲取滾動條距離頂部高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-osTop / 7);
            
            document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
            //到達頂部,清除定時器
            if (osTop == 0) {
                clearInterval(timer);
            };
            isTop = true;
            
        },30);
    };
};

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

-Advertisement-
Play Games
更多相關文章
  • 動畫屬性 背景屬性 邊框(Border) 和 輪廓(Outline) 屬性 盒子(Box) 屬性 顏色(Color) 屬性 內邊距(Padding) 屬性 媒體頁面內容屬性 尺寸(Dimension) 屬性 彈性盒子模型(Flexible Box) 屬性 字體(Font) 屬性 內容生成屬性(Gen ...
  • 效果:http://hovertree.com/texiao/css3/24/效果圖:代碼如下: 轉自:http://hovertree.com/h/bjaf/css3xingxi.htm 特效彙總:http://www.cnblogs.com/roucheng/p/texiao.html ...
  • 二刷《高程》第八章BOM筆記整理。 如果要在Web中使用JavaScript,那麼BOM(瀏覽器對象模型)才是真正核心,BOM提供很多對象,用於訪問瀏覽器的功能,這些功能與任何網頁內容無關。 window對象 location對象 navigator對象 screen對象 history對象 win ...
  • 背景 由於公司的CMS系統里,只接受rar格式壓縮的文件,所以沒法直接使用nodejs里提供的zip壓縮組件。只能從winRar軟體入手了,但網上沒有多少這方面相關的東西,所以下麵也是自己嘗試著在做。 主要解決的幾個問題 rar軟體的位置獲取問題 通過node的命令行組件child_process, ...
  • 1. 禁止右鍵點擊 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隱藏搜索文本框文字 Hide when clicked in the search ...
  • 今天寫了一個回到頂部的demo,沒有複雜的邏輯,所以想來分享。 原理: 1.css上把按鈕固定定位在瀏覽器右下角上,預設為隱藏。 2.當頁面滾動的時候(window.onscroll),按鈕block, 3.當點擊按鈕的時候讓頁面的可視區高度距離瀏覽器頂端逐漸減少直至為0, a)此時需要用到一個定時 ...
  • 在javascript中,經常會需要操作DOM操作,在此記錄一下學習到DOM操作的知識。 一、JavaScript DOM 操作 1.1、DOM概念 DOM :Document Object Model(文本對象模型)。 D : 文檔(html或xml文檔) O : 對象(文檔對象) M : 模型 ...
  • 終於完成了手頭的項目,失蹤人口又回歸啦!在做項目的過程中,遇到很多值得思考的點,速速道來。 第一個遇到的就是網頁大小自適應的問題。 目前比較常用的方法有: 首先要讓頁面大小鋪滿屏幕又不能溢出。只需要在html``標簽內加入viewport(如下),參數分別表示:頁面寬度= 屏幕寬度,最大和最小伸縮比 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...