在不使用JavaScript的情況下向頂部按鈕添加滾動小技巧

將HTML / CSS滾動到頂部

、html概述

1、html標簽是用來給文本添加語義的，而不是用來修飾文本的；

2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一樣，才不會亂碼；

3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協議來寫的，不是html標簽；

4、webstorm快捷鍵大全：https://www.cnblogs.com/yeminglong/p/5995421.html

二、基礎標簽

1、h、p 和 hr 標簽

三個標簽都是占一行

2、注釋：

3、圖片：<img src=" ">

不會獨占一行；
保證不變形，指定寬或者高即可；
title 和 alt 屬性；
src 可以是相對路徑（../ 上一級）和絕對路徑，路徑中盡量不含中文，相對路徑不可跨盤符，路徑分隔統一寫 / ，絕對路徑的可移植性不好；

4、換行： 用于內容未完的換行

5、跳轉：<a href=" "></a>

支持文字和圖片的跳轉；
地址必須加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）屬性控制跳轉是否打開新的選項卡；
title 提示作用；

6、base 標簽：<base target="_self ">

統一指定 a 標簽怎么打開，寫在 head 中

7、假鏈接：點擊不會跳轉

a 標簽的 href 屬性值為 # 或者 javascript
# 會跳轉到頁面的頂部，而 js 不會

8、錨點：<a href="#id值"><\a>

可以跳轉到頁面的指定位置
可以跳轉到其他頁面的指定位置，只需在 # 前面加上頁面的路徑即可
跳轉無過度動畫

三、列表標簽

1、無序列表（!）

<ul><li><\li><\ul>；
整體不可分割；
ul 除了 li 不建議再加其他的標簽，li 標簽中可以放其他標簽來豐富內容；
li 中還可嵌套列表；
ws快捷生成 ul>li*3>h2+p；

2、有序列表（*）

<ol><li><\li><\ol>；

3、定義列表

dt 是標題，dd 是具體的描述；
推薦一個 dt 一個 dd ，也可以一個 dt 對多個 dd 或者沒有 dd；
dl 中不建議加其他標簽，二 dt 和 dd 可以加；
應用：網站尾部，圖文混排（仿京東做個網站的尾部）；

四、表格標簽

1、格式

表格的邊框默認不顯示（border）

2、屬性

（1）寬高

table 和 td 可用；
默認高寬根據內容調整；
td 設置高寬只會改變當前單元格的狀態，而不會改變 table 的高寬；

（2）水平和垂直對齊（align 和 valign）

水平對齊三個都可以用，而垂直對齊針對 tr 和 td；
table 設置 align 控制表格在水平方向的對齊，給 tr 和 td 設置都是控制單元格里的內容的對齊方式，不過 tr 影響一行，td 影響一個，tr 和 td 都設置 td 會覆蓋 tr 的效果；
tr 和 td 設置 valign 都是控制單元格內容的垂直方向的對齊，不過 tr 影響一行，td 影響一個，tr 和 td 都設置 td 會覆蓋 tr 的效果；

（3）內邊距和外邊距（cellpadding 和 cellspacing）

兩個屬性都是 table 的；
外邊距是指格子與格子之間的空隙，而內邊距是指格子與文字之間的間隙；

（4）細線表格

先給 table 設置 bgcolor；
再給 tr 設置 bgcolor；
最后 table 設置 cellspacing；

3、表格的其他標簽

（1）caption：表格的標題標簽，必須寫在 table 內而且需緊跟 table

（2）th：th 和 td 同級，th 有加粗的效果

4、表格的結構

（1）組成：caption 標題、thead 表頭、tbody 主體、tfoot 尾部

（2）說明：

瀏覽器自動添加 tbody；
table 設置高度后，tfoot 和 thead 的高度是不會變化的；

5、單元格的合并

（1）水平方向：td 屬性 colspan = "2"；

（2）垂直方向：td 屬性 rowspan = "2"；

五、表單標簽

1、格式

2、input 標簽

（1）type = text：

（2）password：

（3）radio：互斥要設置 name 相同；默認選中 checked

（4）checkbox：選中 checked

（5）button：

（6）image：

（7）reset：value 修改標題

（8）submit：

form 的 action 確定提交的地址
提交數據加 name 屬性

（9）hidden：

-----------------------------------------------------------------------------------------------------------------------

*相關標簽：

label 標簽：讓文字與 input 標簽綁定；兩種綁定的方式：

datalist 標簽：給輸入框綁定輸入的提示：<datalist><option>haha</option></datalist>
h5 中新增的 input 標簽：email 、url 、number 、color、date（瀏覽器的支持不好）

3、非 input 標簽

（1）select

（2）textarea

cols 和 rows 指定輸入的行列，但是還是可以無限輸入
默認可拉伸，也可通過 css 固定大小

4、練習

（1）表單標簽除了 button 外都可以用 value 來指定提交的值

（2）表單添加邊框可以在 form 中添加 fieldset 來實現

六、多媒體標簽

1、video 標簽

（1）格式：<video src=" " autoplay="autoplay"></video>；

（2）屬性：controls（控制條）poster（海報）loop（循環）preload（預加載，與autoplay沖突）muted（靜音）width/height；

（3）另一種 video 格式：解決瀏覽器的兼容

（4）讓所有的瀏覽器支持 video 標簽：通過 js 框架來實現

2、audio 標簽

（1）使用基本和 video 一樣，屬性只有寬高和 poster 不能用，也是兩種格式

3、details 和 summary 標簽

（1）格式：

4、marquee標簽（跑馬燈效果）

（1）w3c 不推薦，但是瀏覽器的支持好

（2）屬性：direction（方向）scrollamount（滾動的速度）loop（滾動次數，默認-1）behavior（滾動類型 slide）

（3）廢棄的標簽： <hr>加粗下劃線斜體<s>刪除線（無語義）

替代的標簽：<ins><del>（加入了語義）

5、字符實體

（1）&nbsp；空格 &lt；&gt； &copy；版權符號

（2）理解：html 占用了的不顯示的特殊字符用另外的代替符號表示，使他們正常在 html 頁面上顯示

久都沒有去慕課網學習學習了，剛恰好就看見了一個用的比較多的小例子——頁面回到頂部，記得之前自己也是在初學web時，被這個坑了一回，因此今天特地拿來分享分享……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面回到頂部</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <script type="text/javascript" src="myjs.js"></script>    
</head>
<body>
    <a href="javascript：;" id="btn" title="回到頂部"></a>
    <div class="bg">
        <img src="images/tb_bg.jpg" alt="" />
    </div>
</body>
</html>

其中需要引入自己寫的一個樣式文件和一個js文件：

    #btn {
        width: 40px;
        height: 40px;
        position: fixed;
        display: none;
        right: 65px;
        bottom: 10px;
        background: url(images/top_bg.png) no-repeat left top;
    }
    
    #btn:hover {
        background: url(images/top_bg.png) no-repeat 0 -39px;
    }
    
    .bg {
        width: 1190px;
        margin: 0 auto;
    }

js文件：

//頁面加載完畢后觸發
window.onload = function {
    var obtn = document.getElementById('btn');
    var clientHeight=document.documentElement.clientHeight;//獲取頁面可視區域的高度
    var timer = null; //存放定時器
    var isTop=true;
    //滾動條滾動時觸發
    window.onscroll=function{
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(osTop>=clientHeight){
 obtn.style.display="block";
        }else{
 obtn.style.display="none";
        }
        if(!isTop){
 clearInterval(timer);
        }
        isTop=false;
    }
    obtn.onclick = function {
        timer = setInterval(function { //設置定時器
 //獲取滾動條距離頂部的高度
 var osTop = document.documentElement.scrollTop || document.body.scrollTop;
 var ispeed=osTop/5;
 document.documentElement.scrollTop = document.body.scrollTop =osTop-ispeed;
 isTop=true;
 if(osTop==0){
 clearInterval(timer);
 }
        }, 30);
    }
}

文件存放路徑：

基本“回到頂部”效果就這樣子實現，只是我不會在文章中添加動態效果（就是實時的添加這個動態效果圖），求大神賜教！

在線咨詢

上一篇：JavaGUI-Java圖形用戶界面
下一篇：CSS字體屬性，詳解屬性用法，提升前端小白能力

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商