JavaScript 返回頂部實例

大家介紹如何通過 JS/CSS 實現(xiàn)網(wǎng)頁返回頂部效果。

CSS 按鈕樣式：

#myBtn {

display: none; /* 默認隱藏 */

position: fixed;

bottom: 20px;

right: 30px;

z-index: 99;

border: none;

outline: none;

background-color: red; /* 設(shè)置背景顏色，你可以設(shè)置自己想要的顏色或圖片 */

color: white; /* 文本顏色 */

cursor: pointer;

padding: 15px;

border-radius: 10px; /* 圓角 */

}

var topBtn = document.getElementById('top');
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
    // 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滾動超過一屏，返回頂部按鈕出現(xiàn)，反之隱藏
    if(toTop>=winHeight){
        topBtn.style.display = 'block';
    }else {
        topBtn.style.display = 'none';
    }
}
topBtn.onclick=function () {
    var timer = setInterval(function () {
        var toTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 判斷是否到達頂部，到達頂部停止?jié)L動，沒到達頂部繼續(xù)滾動
        if(toTop == 0){
            clearInterval(timer);
        }else {
            // 設(shè)置滾動速度
            var speed = Math.ceil(toTop/5);
            // 頁面向上滾動
            document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
        }
    },50);
}

04頁面是什么，有什么作用？

404頁面的目的是：告訴瀏覽者其所請求的頁面不存在或鏈接錯誤，同時引導(dǎo)用戶使用網(wǎng)站其他頁面而不是關(guān)閉窗口離開。

現(xiàn)在大部分開源系統(tǒng)都會為大家考慮到404頁面的跳轉(zhuǎn)引導(dǎo)，比如：z-blog/wordpress，都是很不錯的開源系統(tǒng)（注意不要用最原始的開源系統(tǒng)，而是采用帶有模板的系統(tǒng)）。菜鳥后院網(wǎng)站本身也是wordpress的開源程序，然后我們用robin模板。(花299元擁有和菜鳥后院一樣的網(wǎng)站，包括域名和1G阿里巴巴云空間)

頁面應(yīng)該達到什么樣的效果才能滿足SEO的要求？

搜索引擎使用 http 狀態(tài)碼來識別網(wǎng)頁的狀態(tài)。當(dāng)搜索引擎獲得不正確的鏈接時，網(wǎng)站應(yīng)該返回一個狀態(tài)代碼404，告訴搜索引擎放棄索引該鏈接。如果返回一個200或302狀態(tài)代碼，搜索引擎會對鏈接進行索引，導(dǎo)致許多不同的鏈接指向相同的頁面內(nèi)容。結(jié)果，搜索引擎對這個網(wǎng)站的信任度大大降低。很多網(wǎng)站存在這個問題，那就是404頁面返回的是200或302狀態(tài)碼而不是404狀態(tài)碼。

正確建立404頁面的方法是：（僅適合Apache服務(wù)器）

在.htaccess 文件中加入代碼： ErrorDocument 404 /Error.html
建立一個簡單的html404頁面命名 Error.html
把 Error.html放置在網(wǎng)站根目錄
如果碰到困難，參考本站：錯誤網(wǎng)頁
注意：不要將404錯誤直接，跳轉(zhuǎn)到網(wǎng)站首頁，這將導(dǎo)致首頁不被收錄，正確的做法是在404頁面加上一個返回首頁的鏈接，讓用戶判斷，并選擇是否返回首頁，或者返回其他頁面，這也是用戶體驗的一種表現(xiàn)，搜索引擎對于這種做法比較友好。
/Error.html 前面不要帶主域名，否則返回的狀態(tài)碼是302或200狀態(tài)碼。

現(xiàn)在我們購買的虛擬主機一般提供有404頁面的制作方法，流程：

1、做一個簡單的404頁面，命名如：404.html；

2、通過ftp把這個404頁面上傳到網(wǎng)站根目錄；

3、進入虛擬主機管理后臺，找到404頁面提交的入口，添加以上404頁面的地址，如：www.cnbackyard.com/404.html（一般空間服務(wù)商都有帶著種功能，也可以直接找他們技術(shù)客服完成這步操作）

4、輸入一個錯誤的鏈接進行訪問測試，隨便輸入，比如：www.cnbackyard.com/123.html，如果正確返回到404.html頁面，則算正確；

5、使用站長工具（http://tool.chinaz.com/pagestatus），輸入任意一個錯誤網(wǎng)址，檢查返回值是否為404。如果返回值是200，代表該主機商設(shè)置有誤，可以與其技術(shù)反饋。

以上操作方法對于一個seo初學(xué)者來說，還是有點復(fù)雜，同學(xué)們可以關(guān)注燃燈教育直播課程，參加我們的培訓(xùn)，理解起來會更透徹一點。

在線咨詢

上一篇：如何從0到1實踐DDD
下一篇：Java 0基礎(chǔ)入門（Html表單、表單元素）

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。