CSS加JS实现网页返回顶部功能

最新推荐文章于 2024-03-19 10:15:00 发布

罗汉爷

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量1.8k

点赞数 2

分类专栏： Web前端文章标签： js返回顶部

本文链接：https://blog.csdn.net/IndexMan/article/details/89437812

版权

Web前端专栏收录该内容

41 篇文章 3 订阅

订阅专栏

最近在设计自己的博客，前端页面在内容很多的时候往下拖动会有滚动条。通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种，这里我采用的最实用的一种。使用CSS+Jquery方式代码量相对较少，容易理解。

实现原理

1.我们需要再DOM中添加自己的DIV，里面包含一个a标签，a标签里面包含两个img标签用于存放返回顶部的图片。

2.添加必要的CSS样式

3.然后通过JS代码实现当网页滚动100px以下，返回顶部的图标开始逐渐出现。相反则图标逐渐消失。这里面有一个渐变的效果。

4.当点击a标签时，JS实现延迟滚动网页到顶部。

实现效果

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>

    <style type="text/css">
        .right-bar {
            position: fixed;
            display: none;
            bottom: 100px;
            right: 0;
            text-align: center;
        }

        .right-bar a {
            text-align: center;
            text-decoration: none;
            color: #757575;
            display: block;
            width: 64px;
        }

        .right-bar .bar-img {
            position: relative;
            width: 30px;
            height: 30px;
            padding-top: 20px;
            margin: 0 0 0 17px;
        }

        .right-bar .bar-s .bar-img img {
            width: 20px;
            height: 20px;
        }

        .right-bar .bar-img .hover-img {
            display: none;
        }

        .right-bar a:hover .hover-img {
            display: block;
        }

        .right-bar a:hover .original-img {
            display: none;
        }

        .content {
            margin: 10px 100px;
            text-indent: 2em;
            text-align: justify;
            line-height: 1.6em;
        }
    </style>
</head>

<body>
    <p class="content">
        此处填充任意大量文本
    </p>
    <div class="right-bar" id="go-to-top">
        <a href="#top">
            <div class="bar-img">
                <img class="original-img" src="image/totop.png">
                <img class="hover-img" src="image/totop_hover.png">
            </div>
        </a>
    </div>
</body>
<script>
    $(function () {
        //当滚动到距顶部100像素以下时，出现箭头图标，否则消失
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#go-to-top").fadeIn(1000);
                }
                else {
                    $("#go-to-top").fadeOut(1000);
                }
            });

            //点击图标回到页面顶部
            $("#go-to-top").click(function () {
                if ($('html').scrollTop()) {
                    $('html').animate({ scrollTop: 0 }, 1000);
                    return false;
                }
                $('body').animate({ scrollTop: 0 }, 1000);
                return false;
            });
        });
    });
</script>

</html>

罗汉爷

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
CSS加JS实现网页返回顶部功能

最近在设计自己的博客，前端页面在内容很多的时候往下拖动会有滚动条。通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种，这里我采用的最实用的一种。使用CSS+Jquery方式代码量相对较少，容易理解。实现原理1.我们需要再DOM中添加自己的DIV，里面包含一个a标签，a标签里面包含两个img标签用于存放返回顶部的图片。2.添加必要的CSS样式3.然后...
复制链接

扫一扫