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/n/135921.html