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 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 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 多维数组排序实现代码
2009/08/05 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
详解JS构造函数中this和return
2017/09/16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
iview table高度动态设置方法
2018/03/14 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python计算回文数的方法
2015/03/11 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
长江三峡导游词
2015/01/31 职场文书
幼师辞职信范文
2015/02/27 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2019销售早会主持词
2019/06/27 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL