jquery实现页面常用的返回顶部效果


Posted in Javascript onMarch 04, 2016

本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下

效果图:

jquery实现页面常用的返回顶部效果

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>返回顶部</title>
  <style type="text/css">
     *{
       margin: 0;
       padding: 0;
     }
     .wrap{
       height: 2000px;
     }
     .gotop{
       display: block;
       width: 32px;
       height: 32px;
       background-color: red;
       text-align: center;
       text-decoration: none;
       font-size: 14px;
       font-weight: bold;
       color: white;
       line-height: 32px;
       position: fixed;
       right:50px;
       bottom:50px; 
       opacity: 0;
       /*top: 500px;*/
     }
  </style>
</head>
<body>
   <div class="wrap">
       <a href="###" class="gotop">TOP</a>
   </div>
   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
    $(function(){
         // 当滚动条滚动大于200时出现,未大于,消失
         $(window).scroll(function(){
           if($(document).scrollTop()<200){
             // alert("kk");
             $(".gotop").stop().animate({
               
                 opacity: 0
                 
             },1000)
           }
           else{
             $(".gotop").show().stop().animate({
                 
                 opacity: 1
                 
             },1000)
           }
        })
       // 返回顶部
       $(".gotop").on("click",function(){
          $("html body").animate({
             scrollTop:0
          },1000)
       })
    })
   </script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 #Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 #Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 #Javascript
基于Javascript实现二级联动菜单效果
Mar 04 #Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 #Javascript
js实现文字滚动效果
Mar 03 #Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
You might like
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Js面试算法详解
2018/04/08 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python threading的使用方法解析
2019/08/28 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
介绍下WebSphere的安全性
2013/01/31 面试题
住宅质量保证书
2014/04/29 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
常用的Python代码调试工具总结
2021/06/23 Python