CSS HTML To Top

一、概述

CSS HTML To Top是一種在網頁底部添加「回到頂部」按鈕的技術。在一個長頁面中，用戶需要不斷滾動頁面才能看到底部的內容，但是到達底部後，用戶卻需要回到頁面頂部才能繼續訪問頁面的其他部分。CSS HTML To Top通過添加一個簡單的按鈕，使得用戶可以輕鬆地回到頁面頂部。

下面將從CSS HTML To Top的實現方法、使用場景、兼容性以及實際應用四個方面進行詳細闡述。

二、實現方法

CSS HTML To Top的實現方法通常有兩種方式：

1、使用JavaScript

<!-- HTML代碼 -->
<a href="javascript:;" class="to-top" id="to-top">回到頂部</a>

<!-- JavaScript代碼 -->
<script type="text/javascript">
    window.onload = function () {
        var oTop = document.getElementById("to-top");
        var screenw = document.documentElement.clientWidth || document.body.clientWidth;
        var screenh = document.documentElement.clientHeight || document.body.clientHeight;
        var oTopLength = (screenw - oTop.offsetWidth) / 2;
        oTop.style.cssText = "right: " + oTopLength + "px; bottom: 10px; display: none;";
        window.onscroll = function () {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrolltop >= (screenh / 2)) {
                oTop.style.display = "block";
            } else {
                oTop.style.display = "none";
            }
        };
        oTop.onclick = function () {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            var timer = setInterval(function () {
                if (scrolltop > 0) {
                    scrolltop -= 100;
                    document.body.scrollTop = scrolltop;
                    document.documentElement.scrollTop = scrolltop;
                } else {
                    clearInterval(timer);
                }
            }, 30);
        };
    };
</script>

使用JavaScript實現CSS HTML To Top的方法較為簡單，只需要在頁面底部添加一個回到頂部鏈接，並通過JavaScript控制其顯示或隱藏，當用戶點擊鏈接時，再通過JavaScript實現頁面平滑滾動到頂部的效果。

2、使用CSS

<!-- HTML代碼 -->
<a class="scroll-top" href="#"><i class="icon-chevron-up"></i></a>

<!-- CSS代碼 -->
.scroll-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: none;
    z-index: 10;
}
.scroll-top:hover {
    cursor: pointer;
}
.scroll-top i {
    background: #fff;
    padding: 10px;
    display: block;
    color: #888;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.scroll-top:hover i {
    background: #428bca;
    color:#fff;
}

使用CSS實現CSS HTML To Top的方法則相對比較複雜，需要在頁面中添加一個回到頂部鏈接，但是需要先隱藏該鏈接。然後對鏈接進行樣式處理，使得其呈現為一個按鈕，當用戶滾動到頁面底部時，通過對鏈接的CSS樣式進行更改，使得回到頂部的按鈕出現，當用戶點擊鏈接時，則實現頁面平滑滾動到頂部的效果。

三、使用場景

CSS HTML To Top特別適用於所有需要用戶不斷滾動頁面才能看到底部內容，且內容較多的頁面，例如新聞、博客、通訊錄等頁面，使用CSS HTML To Top可以大大提高用戶體驗。

四、兼容性

CSS HTML To Top並不是所有瀏覽器都支持，下面是一些常見瀏覽器的支持情況：

IE 9+ 支持
Firefox 支持
Chrome 支持
Safari 支持
Opera 支持

五、實際應用

下面是一個使用CSS實現的CSS HTML To Top的示例：

<!DOCTYPE html>
<html>
<head>
    <title>CSS HTML To Top示例</title>
    <style>
        .scroll-top {
            position: fixed;
            bottom: 50px;
            right: 50px;
            display: none;
            z-index: 10;
        }
        .scroll-top:hover {
            cursor: pointer;
        }
        .scroll-top i {
            background: #fff;
            padding: 10px;
            display: block;
            color: #888;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }
        .scroll-top:hover i {
            background: #428bca;
            color:#fff;
        }
    </style>
</head>

<body>
    <h1>CSS HTML To Top示例</h1>

    <p>CSS HTML To Top是一種在網頁底部添加「回到頂部」按鈕的技術。在一個長頁面中，用戶需要不斷滾動頁面才能看到底部的內容，但是到達底部後，用戶卻需要回到頁面頂部才能繼續訪問頁面的其他部分。CSS HTML To Top通過添加一個簡單的按鈕，使得用戶可以輕鬆地回到頁面頂部。</p>
    <p>下面是一個使用CSS實現的CSS HTML To Top的示例：</p>
    <p><a class="scroll-top" href="#"><i class="icon-chevron-up"></i></a></p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget tellus massa. Cras vestibulum euismod velit, a consectetur ante facilisis et. Nulla dapibus turpis ac risus vestibulum, sit amet viverra metus commodo. Praesent sollicitudin eros nec justo fermentum, nec porta libero iaculis. In hac habitasse platea dictumst. Nunc consectetur dolor velit, eget malesuada tortor venenatis vitae. Ut sit amet enim vel quam gravida volutpat quis sit amet mauris. Suspendisse viverra tortor eu metus sagittis, eget dapibus sem eleifend.</p>
    <p>Maecenas a leo non ex semper tristique. Etiam malesuada mi quis urna varius, sit amet porta erat efficitur. Nunc eu neque suscipit, suscipit magna eget, euismod augue. Nunc in nibh ac nisl lobortis ullamcorper. Integer sit amet eros eu tellus efficitur consequat a eu massa. Pellentesque in cursus est. Pellentesque auctor, neque sollicitudin convallis rutrum, augue magna fringilla odio, ac consectetur nibh erat in velit. Proin efficitur purus eget urna consectetur, vel bibendum urna aliquet. Nullam ac elit in velit dignissim gravida. Sed vel feugiat felis. Fusce pellentesque, nisi ac rhoncus imperdiet, sapien velit molestie tellus, vel pellentesque lorem neque a metus. Vestibulum hendrerit sem eget odio eleifend maximus. Fusce venenatis scelerisque massa sit amet suscipit. Sed porttitor turpis id lectus vulputate, eget tempus nunc finibus. Aliquam erat volutpat.</p>

    <script>
        var oTop = document.querySelector('.scroll-top');
        var screenw = document.documentElement.clientWidth || document.body.clientWidth;
        var oTopLength = (screenw - oTop.offsetWidth) / 2;
        oTop.style.cssText = 'right: ' + oTopLength + 'px;bottom: 10px;display: none;';
        window.onscroll = function () {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrolltop >= 300) {
                oTop.style.display = 'block';
            } else {
                oTop.style.display = 'none';
            }
        };
        oTop.onclick = function () {
            var timer = setInterval(function () {
                var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
                var speed = Math.ceil(scrolltop / 5);
                document.documentElement.scrollTop = document.body.scrollTop = scrolltop - speed;
                if (scrolltop <= 0) {
                    clearInterval(timer);
                }
            }, 30);
        };
    </script>
</body>
</html>

原創文章，作者：RHWN，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/135921.html