1.JQuery是javascript的类库
2.下载JQuery
3.导入JQuery
<script src="jquery-3.0.0.js"></script>
4.JQuery的基本功能
http://www.php100.com/manual/jquery/
5.用JQuery实现点击按钮返回页面顶部的功能
//里面用到了Jquery里面的事件-scroll ，当页面滚动条发生变化执行的函数
$(window).scroll( function() { /* ...do something... */ } );
//里面还用到了Jquery里面的CSS对应的scorllTop，查看当前距离头部的位置
//removeClass和addClass分别是Jquery里面属性中对应的内容，添加css样式类
//初始的时候是hide样式被添加到，滚动的时候这个样式被移除
//$('#id');id选择器
方法1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到我的网站</title> <style> .returnTop{ position:fixed; width:50px; height: 60px; right: 20px; bottom: 20px; background-color: red; } .hide{ display: none; } </style> </head> <body> <div id='return_top' class='returnTop hide' onclick="Go();">返回顶部</div> <!-- <div id='return_top' class='returnTop hide'>返回顶部</div> --> <div style="height:3000px;">asd</div> <script src="jquery-3.0.0.js"></script> <script type="text/javascript"> // $(function(){ // //当页面加载完成之后默认会执行的一个函数 // $('#return_top').click(function(){ // $(window).scrollTop(0); // }); // }) $(window).scroll( function() { // console.log(123); //每滚动一下滑轮，就执行下consolg.log var height = $(window).scrollTop(); if(height>0){ //显示返回顶部 $('#return_top').removeClass('hide'); }else{ //影藏返回顶部 $('#return_top').addClass('hide'); } } ); function Go() { // body... $(window).scrollTop(0); } </script> </body> </html>