小白之返回顶部按钮
样式：
点击按钮后，页面返回顶部。
步骤：
步骤：
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>