jQuery小功能---回到顶部按钮

飒尔

已于 2022-03-04 15:42:22 修改

阅读量161

点赞数

分类专栏： jQuery 文章标签： jquery

于 2021-10-08 20:47:19 首次发布

本文链接：https://blog.csdn.net/CSErtuh/article/details/120659606

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>-jQuery- 回到顶部</title>
    <style>
	body{
		height: 2000px;
	}
        .gotop{
			position:fixed;
			bottom:10px;
			right:10px;
			width:50px;
			height:50px;
			background: #14a5c0;
			text-align:center;
			line-height:50px;
			font-size:26px;
			font-weight:600;
        }
        .gotop a{
			width:100%;
			height:100%;
			color:#fff;
		}
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
			$(".gotop").fadeIn(500);
			$(".gotop").click(function(){
               $('body,html').animate({scrollTop:0},500);
           })
       });
    </script>
</head>
<body>
    <div class="gotop">
    <a href="javascript:;">Top</a>
    </div>
</body>
</html>