小白之返回顶部按钮

样式：

小白之返回顶部按钮

点击按钮后，页面返回顶部。

步骤：

1.引入jquery，bootstrap。

 <script src="jquery/jquery-3.1.0.min.js"></script>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>

2.制作一个按钮，图标使用bootstrap自带的图标。

<a href="" id="totop"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></a>

3.调样式。

4.js

 $(function () {
        $(window).scroll(function () {
if($(this).scrollTop()<200){
                $("#totop").fadeOut();
            }else{
                $("#totop").fadeIn();
            }
        });
        $("#totop").hover(function () {
            $(this).html("返回顶部");
        }, function () {
            $(this).html('<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>');
        })
        .on('click', function () {
                    alert("click");
                    $('html,body').animate({scrollTop:0},'fast');
return false;
                })
    })

html代码展示：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script src="jquery/jquery-3.1.0.min.js"></script>
<style>
        body{height: 5000px;background: #ccc;}
        #totop{text-align:center;line-height:50px;font-size:25px;display: block;width:50px;height:50px;position: fixed;top:50px;right: 50px;background: #000;color: #fff;border-radius: 10px;}
        #totop:hover{background: #fff;color: #000;font-size: 10px;}
</style>
</head>
<body>
<a href="" id="totop"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></a>
<script>
    $(function () {
        $(window).scroll(function () {
if($(this).scrollTop()<200){
                $("#totop").fadeOut();
            }else{
                $("#totop").fadeIn();
            }
        });
        $("#totop").hover(function () {
            $(this).html("返回顶部");
        }, function () {
            $(this).html('<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>');
        })
        .on('click', function () {
                    alert("click");
                    $('html,body').animate({scrollTop:0},'fast');
return false;
                })
    })
</script>
</body>
</html>

View Code

秒客网

小白之返回顶部按钮

相关文章