使用jQuery实现返回顶部


Posted in Javascript onJanuary 26, 2015

使用jQuery实现。所用图片:

使用jQuery实现返回顶部

1、尝试滚动 此页面到底部即可出现go2top按钮。
2、go2top-inner暂未使用。
HTML&JS定义:

<a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a>

<script type="text/javascript">

$(function(){

    $('#go2top').click(function(){

        $("html,body").animate({scrollTop:0},200);

        return false;

    });

    $(window).scroll(function(){

        var obj=$('#go2top');

        if(obj.offset().top>900){

            obj.show();

        }else{

            obj.hide();

        }

    });

});

</script>

CSS定义

.go2top {

    background: url("http://images.cnitblog.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") no-repeat scroll left top transparent;

    bottom: 65px;

    color: #444444;

    display: none;

    height: 50px;

    margin-left: 510px;

    position: fixed;

    right: 160px;

    text-align: center;

    width: 50px;

}

.go2top:hover {

    background-position: -50px top;

}

试试看,是不是有了返回顶部了,非常方便实用的功能,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 #Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 #Javascript
JavaScript事件委托用法分析
Jan 24 #Javascript
jQuery统计上传文件大小的方法
Jan 24 #Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 #Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 #Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 #Javascript
You might like
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python实现的密码强度检测器示例
2017/08/23 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python中sys模块是做什么用的
2020/08/16 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
开业庆典邀请函
2014/01/08 职场文书
安全资金保障制度
2014/01/23 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
碧霞祠导游词
2015/02/09 职场文书
中学社团活动总结
2015/05/07 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers