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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jquery 使用简明教程
2014/03/05 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
jQuery实现评论模块
2020/08/19 jQuery
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python中map、any、all函数用法分析
2015/04/21 Python
Python格式化日期时间操作示例
2018/06/28 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python识别html主要文本框过程解析
2020/02/18 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
详解Anaconda 的安装教程
2020/09/23 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
道德模范先进事迹
2014/02/14 职场文书
自荐信的基本格式
2014/02/22 职场文书
爱情寄语大全
2014/04/09 职场文书
党员自评材料范文
2014/12/17 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang