前端基于jQuery返回顶部功能代码

_____时光如故丶

于 2020-05-18 14:56:53 发布

阅读量273

点赞数

分类专栏：前端文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/weixin_45571903/article/details/106193010

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端基于jQuery返回顶部功能代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Back to Top</title>
    <style>
        .content{
            width: 100%;
            height: 3000px;/*模拟html内容设置高度*/
            background-color: black;
        }
        .scroll-up{
            width: 70px;
            height: 40px;
            line-height: 40px;
            background-color: red;
            position: fixed;
            bottom: 50px;
            right: 100px;
            z-index: 100;
            text-align: center;
            border-radius: 4px;
            color: white;
            text-decoration: none;
            display: none; /*默认将按钮隐藏起来*/
        }
        .scroll-up:hover{
            background-color: rgba(25,180,234,.9);
        }
    </style>
</head>
<body>
    <div class="content"></div>
    <a href="" class="scroll-up">Scroll</a>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(function() {
            //当滚动条的位置处于距顶部200像素以下时，跳转链接出现，否则消失 
            $(function() {
                $(window).scroll(function() {
                    if ($(window).scrollTop() > 200) {
                        $(".scroll-up").fadeIn(1000);//使用淡入效果来显示此返回顶部按钮，延时为1000ms，可按需求自己改
                    } else {
                        $(".scroll-up").fadeOut(1000);//使用淡出效果来隐藏此返回顶部按钮，延时为1000ms，可按需求自己改
                    }
                });

                //当点击跳转链接后，回到页面顶部位置 

                $(".scroll-up").click(function() {
                    $('body,html').animate({
                        scrollTop: 0
                    }, 400);//该动画animate返回顶部所用的时间400ms，可按需求自己改
                    return false;
                });
            });
	    });
    </script>
</body>
</html>

_____时光如故丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基于jQuery返回顶部功能代码

前端基于jQuery返回顶部功能代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Back to Top</title> <style>
复制链接

扫一扫

专栏目录