jquery實現點擊回到頂部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到頂部</title>
    <meta name="viewport" content="width=1200, maximum-scale=1.0, user-scalable=1">
    <style>
        .scrollToTop{
            display: block;
            width: 42px;
            height: 42px;
            position: fixed;
            bottom: 5%;
            right: 2%;
            display: none;
            font-size: 40px;
            background: #232323;
            color: #ebebeb;
            border-radius: 3px;
            text-align: center;
            line-height: 38px;
            z-index: 999;
        }
        .scrollToTop i img{margin:9px 0px 0px 2px;}
    </style>


</head>
<body style="height:2000px">
        
<a href="#" title="sroll" class="scrollToTop"><i><img src="https://www.cnblogs.com/images/cnblogs_com/wrongcode/1426773/o_uptop0.png" alt=""></i></a>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
        $(window).scroll(function() {
            if ($(this).scrollTop() > 300) {
                $('.scrollToTop').fadeIn();
            } else {
                $('.scrollToTop').fadeOut();
            }
        });

        $('.scrollToTop').on("click", function() {
            $('html, body').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
</script>

</body>
</html>

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

-Advertisement-

更多相關文章

JavaScript（二）數據類型（二）

布爾值、null和undefined、全局對象、包裝對象、不可變的原始值和可變的對象引用。 ...
NPM(Node Package Manager,Node包管理器)

簡介每個Node應用都有一個包含該應用元數據的文件 package.json，包含應用名、版本號以及依賴等信息。我們使用NPM從NPM庫下載並安裝第三方包。所有下載的包以及其依賴都保存在node_modules文件夾，這個文件夾應該排除在源代碼版本控制（如git、SVN等）外。 Node的包版 ...
JavaScript碎片—函數閉包（模擬面向對象）

經過這幾天的博客瀏覽，讓我見識大漲，其中有一篇讓我感觸猶深，JavaScript語言本身是沒有面向對象的，但是那些大神們卻深深的模擬出來了面向對象，讓我震撼不已。本篇博客就是在此基礎上加上自己的認知，如有錯誤，還請見諒。具體來說實現模擬面向對象主要是利用JavaScript函數閉包這個概念css3 ...
一些你可能不熟悉的JS知識點總結

js代碼暫時性死區只要塊級作用域存在let命令，它所聲明的變數就“綁定”這個區域，不再受外部的影響。這麼說可能有些抽象，舉個例子： ? 1 2 3 4 5 var temp = 123; if(true) { console.log(temp); let temp; } ? 1 2 3 4 5 v ...
如何通過setTimeout理解JS運行機制詳解

setTimeout()函數：用來指定某個函數或某段代碼在多少毫秒之後執行。它返回一個整數，表示定時器timer的編號，可以用來取消該定時器。例子 ? 1 2 3 4 5 console.log(1); setTimeout(function () { console.log(2); }, 0); ...
前端筆記知識點整合之JavaScript（六）關於那個讓人頭疼的正則表達式

一、正則表達式 1.1正則概述和體驗正則表達式是被用來匹配字元串中的字元組合的模式，常用來做表單驗證。在JavaScript中，正則表達式也是對象，是一種引用類型。案例：正確輸入一個電話號碼，010-12345678，用戶輸入正確返回“對”，錯誤返回“錯” 字元串的方法： split() 根據匹 ...
js預解析

js解析器：瀏覽器中專門用來讀取js腳本解析和執行步驟： 1）找內容——根據關鍵詞：var function 參數,全部找到之後預解析結束 a =  1//所有變數在正式運行之前，都會提前賦值undefined fn = funciong fn(){ console. ...
前端筆記知識點整合之JavaScript（五）關於數組和字元串那點事

一、數組 1.1數組概念數組(array)是一個有序的數據集合。說白了，數組就是一組數。數組內部可以存放一個或多個單獨的數據，整體組成數組。定義數組最簡單的方式：數組字面量。數組的字面量“[]”。習慣將數組賦值給一個變數。數組的字面量就是方括弧，這是定義數組最簡單的方式，至於更多創建數組的方 ...