小火箭返回頂部

来源:https://www.cnblogs.com/2979100039-qq-con/archive/2020/07/15/13307593.html
-Advertisement-
Play Games

網頁中常常會有一個 返回頂部的功能,恰巧我這天寫到了,在網上找了一下思路,下麵就寫了一個案例: 效果預覽:https://li_shang_shan.gitee.io/small_rocket_back_to_top。 代碼就直接粘貼了: <html> <head> <meta charset="u ...


網頁中常常會有一個 返回頂部的功能,恰巧我這天寫到了,在網上找了一下思路,下麵就寫了一個案例:

效果預覽:https://li_shang_shan.gitee.io/small_rocket_back_to_top

代碼就直接粘貼了:

<html>
    <head>
        <meta charset="utf-8" />
        <title>返回頂部插件</title>
    </head>
    <style type="text/css">
        body{
            background: url(img/bg.jpg) 100%;
            text-align: center;
        }
        .bg_top{
            width: 100px;
            height: 110px;
            position: fixed;
            right: 30px;
            bottom: 50px;
            display: none;
            
        }
        .bg_top img{
            width: 100px;
            height: 110px;
            transition: all 1s ease 0s; 
            cursor: pointer;
            opacity: 0.6;
        }
        .yun{
            width: 300px;
            margin: 0 auto;
        }
        h4{
            margin: 30px auto;
            font-size: 35px
            color: rgb(0,0,0);
        }
    </style>
    <body>
        <h4>往下滑動滾動條出現小火箭</h4>
        <img src="./img/yunceng.jpg" class="yun">
        <div class="bg_top">
            <img src="./img/小火箭.gif" >
        </div>
        <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $(window).scroll(function () {
                        var scroll_top = $(document).scrollTop();
                        if (scroll_top > 400) {               //當向下滾動400px時,出現返回頂部鏈接
                            $(".bg_top").show(300);
                        } else {
                            $(".bg_top").hide(300);
                        }
                    });
                    $(".bg_top").click(function () {
                        $("html,body").animate({scrollTop:0}, 1000);
                    });
                    $(".bg_top img").hover(function(){
                        $(this).css({
                            "opacity":1,
                            "width":"90",
                            "margin-top":"10px",
                        });        
                    },function(){
                        $(this).css({
                            "opacity":0.6,
                            "width":"100",
                            "margin-top":"0",
                        });
                    });
            });
        </script>
    </body>
</html>

置頂的小火箭可以在網上找,或者去矢量圖庫下載,用個箭頭或者圖片代替都OK

個人學習,內容簡略。


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

-Advertisement-
Play Games
更多相關文章
  • mongodb的安裝非常簡單,官網有提供安裝版和綠色版的下載(外網,速度慢的一批,網速跟不上的同志建議從其他渠道下載),我本地裝的是安裝版的,目錄為預設目錄。再此不細聊如何安裝,直接進入主題,首先是如何啟動。 啟動步驟:方法1:命令行參數方式啟動服務 1.在mongodb安裝目錄下,與bin同級的目 ...
  • 一、InnoDB 體系架構 InnoDB 存儲引擎有多個記憶體塊,可以認為這些記憶體塊組成了一個大的記憶體池,負責如下工作: 維護所有進程/線程需要訪問的多個內部數據結構。 緩存磁碟上的數據,方便快速的讀取,同時對磁碟文件的數據修改之前在這裡進行緩存。 重做日誌(redo log)緩衝。 後臺線程的主要作 ...
  • 1 #標識列 2 /* 3 又稱為自增長列 4 含義:可以不用手動的插入值,系統提供預設的序列值 5 6 7 特點: 8 1、標識列必須和主鍵搭配嗎?不一定,但要求是一個key 9 2、一個表可以有幾個標識列?至多一個! 10 3、標識列的類型只能是數值型 11 4、標識列可以通過 SET auto ...
  • 1 #常見約束 2 3 /* 4 5 6 含義:一種限制,用於限製表中的數據,為了保證表中的數據的準確和可靠性 7 8 9 分類:六大約束 10 NOT NULL:非空,用於保證該欄位的值不能為空 11 比如姓名、學號等 12 DEFAULT:預設,用於保證該欄位有預設值 13 比如性別 14 PR ...
  • 本文更新於2020-04-05,使用MySQL 5.7,操作系統為Deepin 15.4。 安裝 MySQL Utilities需單獨安裝,如使用apt-get命令: apt-get install mysql-utilities 分類 MySQL工具根據用途可以分為如下幾類: 審計日誌管理:mys ...
  • 參考博客:https://blog.csdn.net/harvic880925/article/details/40660137 EventBus簡介 EventBus有哪些優點 Demo案例分享及問題解決 一、什麼是EventBus 由greenboot組織貢獻(該組織還貢獻了greenDAO), ...
  • 教程 必讀 | 深入理解佈局約束 插件 elastic-widgets Set of Flutter widgets built using physics based animations. timeago.dart A library useful for creating fuzzy time ...
  • JS寄快遞地址智能解析——2020年7月15日 去年做了些前端內容,最近在整理一些稍微有點用的內容,比如智能解析地址,用戶只要輸入:張三1351111111江蘇省揚州市廣陵區XX小區X樓xxx室,就能解析出 姓名、電話、省市區、地址信息了。是不是很方便? 項目地址暫時沒有放,大家可以關註我的個人碼雲 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...