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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python生成二维码的实例详解
2017/10/29 Python
import的本质解析
2017/10/30 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python如何根据时间序列数据作图
2020/05/12 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python字典dict常用方法函数实例
2020/11/09 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
师德学习感言
2014/01/31 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
个人租房协议书
2014/11/28 职场文书